Bootstrap Snippet Responsive Multilevel Navigation Menu using HTML CSS jQuery

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
<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="navigation">
    <nav>
        <div class="visible-xs menu_header">
            <span class="mobile_logo">Menu</span>
            <button class="btn menu_btn baars"> 
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
                <span class="icon_bar"></span>
            </button>       
            <div class="clear"></div>
        </div>
        
        <ul class="nav-ul">
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
            <li><a href="#">Link5</a></li>
            <li class="dropdown"><a href="#" class="dropdownlink">Link6</a>
                <ul class="dropdownmenu">
                    <li><a href="#">dropdown link1</a></li>
                    <li><a href="#">dropdown link2</a>
                    </li>
                </ul>
            
            </li>    
        </ul>
    </nav>
</div>
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
a:hover , a:focus{ text-decoration: none;}
ul{ margin: 0px; padding: 0px;}
ul li{ list-style-type: none;}
clear{ clear: both;}
/******Main navigation css start******/
.navigation{ background: #20aff2;}  
nav ul li{ display:inline-block;}
nav ul li a{ font-size: 16px; color: #fff; padding: 12px 25px; display: inline-block;}
nav ul li:hover a{ background: #323232; color: #fff;}
/******Main navigation css end******/
@media only screen and (min-width: 768px){
/******common dropdown css start******/
.dropdownmenu , .subdropdownmenu{  opacity: 0; visibility: hidden; transition: all 0.5s ease;}
.dropdown , .subdropdown{ position: relative; z-index: 1;} 
.dropdown li{ display:block;}
.dropdown li a{ color: #fff; display:block; background: #323232;}
.dropdown li:hover a, .dropdown li.active a{ background: #4a4949; color: #fff;}
.dropdownmenu{ position: absolute;  z-index: 1000; min-width: 195px; background: #323232;}
.dropdownmenu.open{  opacity: 1; visibility: visible;}
/*fisrt level menu start*/
.dropdownmenu{  top: 65px; left: 0; transition: all 0.5s ease; }
.dropdownmenu.open{ top: 100%;}
/*fisrt level menu end*/
/******common dropdown css end******/
}
@media only screen and (max-width: 760px){
.navigation{ background: none;}
.menu_header span{ padding-top: 5px; display:inline-block;}
.menu_header button{ float:right;}
.baars{ display:inline-block; margin-right: 5px; vertical-align:middle;}
.baars .icon_bar{ width: 22px; height: 3px; margin-bottom:3px; background: #000; display: block; padding: 0px; transition: all 0.5s ease;}
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
$(document).ready(function(e) {
        if(screen.width >= 768)
        {
            $(".dropdown").hover(function(){
                $(".dropdownmenu").toggleClass("open");
            });
        }
     });
     
     $(document).ready(function(e) {    
        if(screen.width <= 760)
        {
            $('.menu_btn').click(function(){
                $('.nav-ul').toggleClass('active');
                $('.baars').toggleClass('cross');
                
            });
            
            $(".dropdown").click(function(){
                $(".dropdownmenu").slideToggle("open");
            }); 
            
            $('.nav-ul').click(function(e) {
                if( !$(e.target).hasClass('dropdownlink') )
                {
                    $(".nav-ul.active").removeClass("active");
                    $('.baars.cross').removeClass('cross');
                    $(".dropdownmenu").slideUp("open");
                }
            });    
            
        }
        window.onresize = function(event)
        {
            document.location.reload(true);
        }
     });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Multilevel Navigation Menu"
Bootstrap 3.3.0 Snippet by raviashar

Related: See More

Questions / Comments:

"Responsive Multilevel Navigation Menu" Bootstrap 3.3.0 Snippet by raviashar

Related: See More

Questions / Comments:

"Responsive Multilevel Navigation Menu"
Bootstrap 3.3.0 Snippet by raviashar