I can't make a menu navbar dropdown, here's my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>tech
</li>
<li class="dropdown">
case <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" href="#">In</a>
</li>
<li role="presentation"><a role="menuitem" href="#">Out</a>
</li>
</ul>
</li>
<li>staff
</li>
<li>gallery
</li>
<li>Contact
</li>
</ul>
</div>
I want to make the case become a dropdown menu, but I can't make the menu items "in" and "out" appear, what am I doing wrong?
Your scripts might not have properly loaded. I tested your codes and they work just fine. I only added the following lines to load the required files from external sources:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Related
I am trying to add a submenu for the 3rd item in the list that is in a dropdown from the item in the navbar, I've tried using the classes built into bootstrap and was unsuccessful. This is in my navbar
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
Edit:
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
<!-- from w3schools-->
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
This link better shows what I want to do but haven't been able to.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h
Check below snippet.
As per your given link you need to change little html code and you have to add script to toggle dropdown.
You can also achieve this using css. see https://codepen.io/Magisters/pen/MwbeWv
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li id="navTimesheet" class="dropdown">
Navbar Item Title<span class="caret"></span>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li class="dropdown-submenu">
item3<span class="caret"></span>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
I'm working on a project with bootstrap. I just included a sub menu in the pills navbar but it doesn't work. When I click on messages nothing happens
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Home</li>
<li class="dropdown" role="presentation">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li>Trash</li>
</ul>
</li>
<li role="presentation">Users</li>
<li role="presentation">Messages</li>
<li role="presentation">Contact</li>
</ul>
Any help with the script above. Thanks
See how data-toggle="dropdown" is in the anchor tag for About? It appears that you have the dropdown menu under About, not Messages.
Also, be sure to include the Bootstrap JavaScript. There should be a tag like <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> in the <head> section of your HTML. This is what enables the dropdown to work.
I'm making a dropdown menu in bootstrap.
Now I use in the li a a element where is described to toggle the dropdown menu.
But I actually want to put what is in the a element in to the li...
Because the whole li has to be clickable.
Hope you guys have I tip for me. ;)
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
please apply 'dropdown' class to the li where you wants to add dropdown like this.
<ul class="list-group">
<li class="list-group-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
You can just make the a tag take full width and then the entire li becomes clickable.
.dropdown-toggle{
display:inline-block;
width: 100%;
cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
I'm learning bootstrap for the first time and the dropdown menu seems to be unformatted and doesn't look like the other menu options that I've made. Its also not appearing when clicked, but I followed a tutorial exactly. Any ideas on the problem or mistakes?
<html>
<head>
<title>Bootstrap Testing</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<!--Logo-->
<div class='navbar-header'>
<a href="#" class='navbar-brand'>MY LOGO</a>
</div>
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</div>
</nav>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>
You need to place the <li class='dropdown'> within the <ul class='nav navbar-nav'>. (The presence of an <li> element without a parent list element should probably be cause for alarm in any case.)
So that part of your HTML should be shuffled to look like:
<!-- [...] -->
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
<!-- [...] -->
Here's a Bootply of the revised code. Hope this helps! Let me know if you have any questions.
The bootstrap.min.js needs to come after you load jquery. I always like to start my documents with the basic template bootstrap shows here: http://getbootstrap.com/getting-started/#template
It makes it a lot easier to make sure I have everything loading and in the right order.
You will also want to move your dropdown li to be inside your ul with the "nav navbar-nav" class. Like this:
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
The dropdown in the navigation is not working. The html is as follows. Help will be appreciated.
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
Your html is fine the only thing missing is the jQuery code and the bootstrap js, add these in the same order under your last </div>.
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
You need to include the bootstrap and jquery libraries, they handle the logic for displaying the dropdown interface working example below:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
You had a container inside a row and content inside a container, I've corrected that. The correct hierarchy is container => row => col-??-##. If you put it in any other order, it will malfunction. This should work. I'm assuming you've added thetag for bootstrap.min.js (or whatever flavor you prefer) andjquery`. If not, please do so.
<div class="container menu_bg">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">SVN</li>
<li role="presentation">iOS</li>
<li role="presentation">VB.Net</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Java<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
</div>