Hi, I'm back with another one twitter bootstrap tutorials, which discusses about how to create a responsive multi level drop down menu in twitter bootstrap. Building html drop down menu in bootstrap is quite easy as the css framework provides built in components for doing it. But at times you may want to expand the website’s navigation menu into multi-level drop down especially when developing large portals or shopping sites. Unfortunately bootstrap 3.x versions doesn’t provide readymade styles for this but definitely you can accomplish it with some workaround.
If you wish to learn to build simple responsive drop down menu in bootstrap then check out this bootstrap dropdown menu tutorial.
Creating Responsive Multi Level Drop Down Menu in Bootstrap
Though there is no direct way to create multilevel dropdown menu, bootstrap framework is quite flexible and provides excellent base to extend its functionalities. It’s .dropdown-menu css class provides means for adding dropdown menu items and we should extend it to add further levels to the menu.
Step-1: First we should have all the required files in place to start working. So create html file with name ‘index.html’ in your working directory and make sure to include bootstrap's css, javascript and jquery files to it like below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/path/to/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="/path/to/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/path/to/bootstrap.js" type="text/javascript"></script>
</body>
</html>
Step-2: Now we need to include some custom css styles, so create a stylesheet with name ‘custom.css’ and add the below css styles to it.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
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;
}
Step-3: Now link this custom stylesheet below bootstrap’s css file like this.
<link href="/path/to/custom.css" rel="stylesheet" type="text/css" />
Step-4: Well! We have all the required css styles in place, now it’s time to write up the actual html markup to check if we can build multilevel drop down menu in bootstrap with all the above tweaks. Copy paste the below code to our index file.
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#multi-level-dropdown">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyHOME</a>
</div>
<!-- menus -->
<div class="collapse navbar-collapse" id="multi-level-dropdown">
<ul class="nav navbar-nav">
<li><a href="#">Kitchen Accessories</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Interiors<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Furnitures</a></li>
<li><a href="#">Fans</a></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Lamps</a>
<ul class="dropdown-menu">
<li><a href="#">Ceiling Lamps</a></li>
<li><a href="#">Table Lamps</a></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Floor Lamps</a>
<ul class="dropdown-menu">
<li><a href="#">Living Room</a></li>
<li><a href="#">Bed Room</a></li>
<li><a href="#">Garden Lamps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Bath Fittings</a></li>
</ul>
</div>
</div>
</nav>
As you can see above, we have used the custom css class .dropdown-submenu to the <li> element wherever we want to go one level further down the menu.
Now open the index file in browser and you can see a nicely responsive bootstrap multi level drop down menu.
 |
| Responsive Multi-Level Dropdown Menu in Twitter Bootstrap |
The complete code for index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/path/to/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/path/to/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- bootstrap responsive multi-level dropdown menu -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#multi-level-dropdown">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyHOME</a>
</div>
<!-- menus -->
<div class="collapse navbar-collapse" id="multi-level-dropdown">
<ul class="nav navbar-nav">
<li><a href="#">Kitchen Accessories</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Interiors<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Furnitures</a></li>
<li><a href="#">Fans</a></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Lamps</a>
<ul class="dropdown-menu">
<li><a href="#">Ceiling Lamps</a></li>
<li><a href="#">Table Lamps</a></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Floor Lamps</a>
<ul class="dropdown-menu">
<li><a href="#">Living Room</a></li>
<li><a href="#">Bed Room</a></li>
<li><a href="#">Garden Lamps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Bath Fittings</a></li>
</ul>
</div>
</div>
</nav>
<script src="/path/to/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/path/to/bootstrap.js" type="text/javascript"></script>
</body>
</html>
And that was all about creating responsive multi level drop down menu in twitter bootstrap. If you want to change bootstrap’s navigation menu color, then take a look at this twitter bootstrap navbar customization tutorial.
Recommended Read:- How to Add Social Media Icons to Bootstrap Navigation Menu
- How to Add Search Box with Icon to Bootstrap Navigation Menu
Reference: http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Thank you for the post.
ReplyDeleteThe submenu seems not working in smart devices