Categories
Drupal Development Resources WordPress

Multilevel dropdown menus with Bootstrap 3.x

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>

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*/

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;}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.