Bootstrap 3.0 and newer no longer supports multiple tier dropdowns for navigation bars. This snippet of jquery prevents Bootstrap from toggling the “open” classes when you go past the first dropdown. No additional CSS or markup required!
/**
* NAME: Bootstrap 3 Triple Nested Sub-Menus
* This script will active Triple level multi drop-down menus in Bootstrap 3.*
*/
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
This has been tested to work with Bootstrap 3.1.x up to 2 tiers for dropdown menus.
6 replies on “Multilevel dropdown menus with Bootstrap 3.x”
I've added this jQuery to my footer. Then I am using this HTML code to have two-level menu but this is not working.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Learn
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="basics-of-web-learn.php">Basics of Web</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Basics of Web
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Basics</a></li>
<li><a href="#">HTTP Request Methods</a></li>
<li><a href="#">HTTP Response Codes</a></li>
</ul>
</li>
<li><a href="web-design-principles-learn.php">Web Design Principles</a></li>
<li><a href="html-learn.php">HTML</a></li>
<li><a href="css-learn.php">CSS</a></li>
<li><a href="javascript-learn.php">JavaScript</a></li>
<li><a href="xml-learn.php">XML</a></li>
<li><a href="php-learn.php">PHP</a></li>
<li><a href="mysql-learn.php">MySQL</a></li>
</ul>
</li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Examples
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="html-practicals-examples.php">HTML</a></li>
<li><a href="css-practicals-examples.php">CSS</a></li>
<li><a href="javascript-practicals-examples.php">JavaScript</a></li>
<li><a href="xml-practicals-examples.php">XML</a></li>
<li><a href="php-practicals-examples.php">PHP</a></li>
<li><a href="mysql-practicals-examples.php">MySQL</a></li>
</ul>
</li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Q & A
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="basics-of-web-questions-answers.php">Basics of Web</a></li>
<li><a href="web-design-principles.php">Web Design Principles</a></li>
<li><a href="html-questions-answers.php">HTML</a></li>
<li><a href="css-questions-answers.php">CSS</a></li>
<li><a href="javascript-questions-answers.php">JavaScript</a></li>
<li><a href="xml-questions-answers.php">XML</a></li>
<li><a href="php-questions-answers.php">PHP</a></li>
<li><a href="mysql-questions-answers.php">MySQL</a></li>
</ul>
</li>
</ul>
Would love to know how use this snippet. Do i add jquery and which verion? and do I add this snippet as it's own file?
Dave
Well for me css IS required.
Added the following styles:
/*Dropdown Css*/
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: 1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*./Dropdown Css*/
NOTE!!! Some bugs found in mobile version
Thanks for the above CSS
It finally helped the second, third level menu to work after a lot of looking around.
I found solution which work OK both on desktop and mobile versions.
JS:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
CSS:
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}