×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Dropdown NavBar creation Using CSS & Bootstrap Customizing dropdown menu create by bootstrap
Multi level Dropdown Menu in bootstrap - Bootstrap 3
9394    Arnab De    18/05/2017

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

softetechnologies

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

softetechnologies

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

Dropdown NavBar creation Using CSS & Bootstrap Customizing dropdown menu create by bootstrap
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.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
All that man has to do is to take care of three things; good thought, good word, good deed.
Swami Vivekananda
3750
51.71
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     41743
01/01/2018     35913
28/06/2017     33955
25/06/2018     33203
02/08/2017     32306
06/07/2017     26716
01/08/2017     26706
15/05/2017     26325
14/07/2017     21730
21/04/2018     20623
softetechnologies