"Bootstrap multi level navigation menu | multi level dropdown menu with responsive"
Bootstrap 3.3.0 Snippet by Tauhidpro

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="text-center"><h2>Bootstrap multi level navigation menu | multi level dropdown menu <br> with responsive in Bootstrap 3</h2></div>
<div id="header-area" class="header_area">
<div class="header_bottom">
<div class="container">
<div class="row">
<nav role="navigation" class="navbar navbar-default mainmenu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul id="fresponsive" class="nav navbar-nav dropdown">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">service</a></li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle">Submenu 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Lorem ipsum</a></li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li>
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu 3<span class="caret"></span></a>
<ul class="dropdown-menu">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Roboto');
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
body{font-family: 'Roboto', sans-serif;}
/*
1.1 Header Area
***************************************************/
/*Bootstrap Reset*/
.navbar-nav > li > a {
padding-top: 0;
padding-bottom: 0;
}
.mainmenu {
background-color: transparent;
border-color: transparent;
margin-bottom: 0;
border: 0px !important;
}
.navbar-nav > li:last-child > a {
padding-right: 0px;
margin-right: 0px;
}
.dropdown-menu {
padding: 0px 0;
margin: 0 0 0;
border: 0px solid transition !important;
border: 0px solid rgba(0,0,0,.15);
border-radius: 0px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/*=-====Main Menu=====*/
.navbar-nav .open .dropdown-menu > li > a {padding: 16px 15px 16px 25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard 2 PRO
Navbar with Social icon & Dropdown
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Cool Navigation Bar

Questions / Comments:

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks.

etigger () - 3 years ago - Reply 0

Thanks!

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size.

How can do that?

etigger () - 3 years ago - Reply 0

Thanks!

When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can do that?

etigger () - 3 years ago - Reply 0

Thanks! When I try to copy all the script in a html file, there is no response when I click the "hamburger" in mobile size. How can do that?

etigger () - 3 years ago - Reply 0

Very useful! When I try to copy all your script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks.

etigger () - 3 years ago - Reply 0

Very useful! When I try to copy all your script in a html file, there is no response when I click the "hamburger" in mobile size. How can you do that? Thanks

etigger () - 3 years ago - Reply 0