Twitter Bootstrap Multipage Dropdown

Question

Is it possible to have a dropdown menu with multiple levels using twitter bootstrap 2 elements? In the original version, this feature is missing.

Answer 1

Updated Answer

^{* Updated answer that supports the stylesheet version version v2.1.1 ** bootstrap.}

^{** But be careful because this solution has been removed from v3}

I just want to note that this solution is no longer required, since the last boot file now supports multi-level drop-down lists by default. You can still use it if you are in earlier versions, but for those who have upgraded to the latest version (v2.1.1 at the time of writing), it is no longer needed. Here is the fiddle with the updated default multi-level drop-down list directly from the documentation:

http://jsfiddle.net/2Smgv/2858/

---

Original answer

Some issues related to supporting submenus in github have been raised, and they are usually closed by bootstrap developers such as this , so I think developers using a boot block need to do something. Here is a demo that I put together, showing you how you can crack a working submenu.

Corresponding code

CSS

.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; display: block; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px; } .navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px; } 

Created my own .sub-menu class for applying to drop-down menus with two levels, so we can place them next to our menu items. Also change the arrow to display it to the left of the submenu group.

Demo

Answer 2

[Twitter Bootstrap v3]

To create an n-level drop-down menu (touch-friendly device) in Twitter Bootstrap v3,

• jsfiddle-demo drop-down menu n-level v3.0.0 | v3.1.1 | v3.3.0

CSS

 .dropdown-menu>li /* To prevent selection of text */ { position:relative; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; cursor:pointer; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; display:none; margin-top: -1px; border-top-left-radius:0; border-bottom-left-radius:0; border-left-color:#fff; box-shadow:none; } .right-caret:after,.left-caret:after { content:""; border-bottom: 5px solid transparent; border-top: 5px solid transparent; display: inline-block; height: 0; vertical-align: middle; width: 0; margin-left:5px; } .right-caret:after { border-left: 5px solid #ffaf46; } .left-caret:after { border-right: 5px solid #ffaf46; } 

JQuery

 $(function(){ $(".dropdown-menu > li > a.trigger").on("click",function(e){ var current=$(this).next(); var grandparent=$(this).parent().parent(); if($(this).hasClass('left-caret')||$(this).hasClass('right-caret')) $(this).toggleClass('right-caret left-caret'); grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret'); grandparent.find(".sub-menu:visible").not(current).hide(); current.toggle(); e.stopPropagation(); }); $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){ var root=$(this).closest('.dropdown'); root.find('.left-caret').toggleClass('right-caret left-caret'); root.find('.sub-menu:visible').hide(); }); }); 

HTML:

 <div class="dropdown" style="position:relative"> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a class="trigger right-caret">Level 1</a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Level 2</a></li> <li> <a class="trigger right-caret">Level 2</a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li> <a class="trigger right-caret">Level 3</a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Level 4</a></li> <li><a href="#">Level 4</a></li> <li><a href="#">Level 4</a></li> </ul> </li> </ul> </li> <li><a href="#">Level 2</a></li> </ul> </li> <li><a href="#">Level 1</a></li> <li><a href="#">Level 1</a></li> </ul> </div> 

Answer 3

This example is from http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Works for me in Bootstrap v3.1.1.

HTML

 <div class="container"> <div class="row"> <h2>Multi level dropdown menu in Bootstrap 3</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="#">Some action</a></li> <li><a href="#">Some other action</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a href="#">Even More..</a> <ul class="dropdown-menu"> <li><a href="#">3rd level</a></li> <li><a href="#">3rd level</a></li> </ul> </li> <li><a href="#">Second level</a></li> <li><a href="#">Second level</a></li> </ul> </li> </ul> </div> </div> 

CSS

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

Answer 4

I was able to fix the submenu, always sticking to the top of the parent menu from the Andres answer with the following addition:

 .dropdown-menu li { position: relative; } 

I also add an icon-chevron-right icon on elements that contain a menu submenu, and change the icon from black to white on hover (to emphasize that the text changes to white and looks better with a blue background selected).

The following is a complete change to / css (replace above):

 .dropdown-menu li { position: relative; [class^="icon-"] { float: right; } &:hover { // Switch to white icons on hover [class^="icon-"] { background-image: url("../img/glyphicons-halflings-white.png"); } } } 

Answer 5

I just added class="span2" to the <li> for the dropdowns and it worked.

Answer 6

Since Bootstrap 3 has removed part of the submenu, and we need to adapt to the style, I think it's better to go with SmartMenu Bootstrap: https://vadikom.imtqy.com/smartmenus/src/demo/bootstrap-navbar.html#

This will save us time on mobile recall and style.

This plugin is also very promising.