Submenu Drop Down in Bootstrap not working - html

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>

Related

Bootstrap dropdown not working in some views

I am struggling to get my dropdown menu to function properly. I pulled the template for the dropdown straight from the Twitter Bootstrap guide(v3) and tweaked it for my purposes. The app is built in Sinatra, and the code for the dropdown resides in my layout view. The menu works properly from any views the are on the same level as layout, but when clicking on the dropdown from any view located in a subdirectory, clicking it just appends a # to the end of the URL and the menu does not drop down.
<li class="dropdown">
<a data-target="#" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Campaigns <span class="caret"></span></a>
<ul class="dropdown-menu">
<% current_user.campaigns.each do |campaign| %>
<li><%= campaign.name %></li>
<% end %>
<li role="separator" class="divider"></li>
<li>New Campaign</li>
</ul>
</li>
Any help is greatly appreciated!
Use jQuery for multi level dropdown, if that's what you are looking for.
Substitute your dropdown data into this.
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<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>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">MENU
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">List 1</a></li>
<li><a tabindex="-1" href="#">List 2</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

Dropdown menu inside of another drop down menu is not working

I'm having trouble getting a drop-down menu inside another dropdown menu to work. The first level dropdown works fine, but for the second level, when I click on the option for the dropdown menu (Learning Profiles) nothing happens... the menu fails to display.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class="dropdown">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
there is little change in the html
<div class="container">
<div class="row">
<div class="col-md-2">
<nav id="sideNavBar">
<ul class="nav nav-pills nav-stacked">
<li id="navBarTitle">MENU</li>
<li class="dropdown">
Children <span class="caret"></span>
<ul class="dropdown-menu">
<li>
Add Child
</li>
<li>
Archive/Delete Child
</li>
<li>
Children Details
</li>
<li class ="dropdown-submenu">
Learning Profiles<span class="caret"></span>
<ul class="dropdown-menu">
<li>
Observations
</li>
<li>
Learning Outcomes
</li>
<li>
Photos
</li>
</ul>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
and add the following css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
also you need to add javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
working plunker : https://plnkr.co/edit/jjrowMvX3FJ7OAsFpiaA?p=preview

Bootstrap pills sub menu not working

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.

Can I use a data-toggle dropdown on a li? In Bootstrap

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>

Can't make menu navbar dropdown

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>