Multi level Dropdown Menu in bootstrap
18-05-2017    2835 times
Multi level Dropdown Menu

Multilevel Dropdown Menu is not directly supported in Bootstrap. But we can easily create it using little bit of customize CSS in our page. we must write a small JQuery codes for it. To cteate a multilevel menu we must override the css class or create our own class and apply it allong with bootstrap classes.

code for Multilevel Dropdown

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/ css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
hr{
margin: 60px 0;
}
.nav{
background-color:#cf4141;
}
.nav-pills>li>a
{
border-radius:0px;
color:#fff;
font-weight:bold;
}
.nav-pills>li.active>a
{
background-color:#aa0000;
}
.nav-pills>li.active>a:hover
{
background-color:#aa0000;
}
.dropdown-toggle
{
background-color:#cf4141!important;
}
.dropdown-menu{
background-color:#cf4141!important;
}
.dropdown-menu>li>a{
color:#fff;
font-weight:bold;
}
.dropdown-menu>li>a:hover {
background-color:#aa0000;
background-image:none;
color:#fff;
}
.divider
{
background-color:#fff;
}

Tutorial at home

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

</style>
<script lang="javascript">
(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);
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"> <a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">.NET</a></li>
<li><a href="#">Java</a></li>
<li class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-toggle">MSOffice </a>
<ul class="dropdown-menu">
<li><a href="#">Word</a></li>
<li class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Excel</a>
<ul class="dropdown-menu">
<li><a href="#">Basic</a></li>
<li><a href="#">Advance</a></li>
</ul>
</li>

<li><a href="#">Power Point</a></li>
<li><a href="#">Access</a> </li>
</ul>

</li>

Tutorial at home

</ul>
</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li> <a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>

</div>
<div class="container">

<h3 style="font-size:2vh;">Tutorial At Home</h3>
<p>Free Tutorial for All</p>
</div>
</body>
</html>

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post