<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 ----------> <h3 class="text-center">Responsive Mega Navigation Menu with Bootstrap</h3> <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 active"><a href="#" class="dropdownlink">Link6</a> <div class="dropdownmenu row"> <div class="col-md-3 col-sm-3 col-xs-12"> <ul> <li class="active"><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> <li class=""><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <ul> <li class=""><a href="#">dropdown link1</a></li> <li class="active"><a href="#">dropdown link2</a></li> <li class=""><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <ul> <li class=""><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> <li class="active"><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <ul> <li class=""><a href="#">dropdown link1</a></li> <li class=""><a href="#">dropdown link2</a></li> <li class=""><a href="#">dropdown link1</a></li> <li class="active"><a href="#">dropdown link2</a></li> </ul> </div> </div> </li> <div class="clear"></div> </ul> </nav> </div>

a:hover , a:focus{ text-decoration: none;} ul{ margin: 0px; padding: 0px;} ul li{ list-style-type: none;} .clear{ clear: both;} h3{ margin-bottom: 20px;} /******Main navigation css start******/ .navigation{ background: #fb5353; position: relative;} .nav-ul li{ float: left;} .nav-ul li a{ font-size: 16px; color: #fff; padding: 12px 25px; display: inline-block;} .nav-ul li:hover a , nav ul li.active a{ background: #323232; color: #fff;} .dropdownmenu.row{ margin: 0px !important;} /******Main navigation css end******/ @media only screen and (min-width: 768px){ /******common dropdown css start******/ .dropdown{ position: inherit; z-index: 1;} .dropdown li{ display:block; float:none;} .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: 9; background: #323232; opacity: 0; visibility: hidden; transition: all 0.5s ease; top: 45px; left: 0; transition: all 0.5s ease; width: 100%;} .dropdownmenu.open{ opacity: 1; visibility: visible;} /******common dropdown css end******/ } @media only screen and (max-width: 760px){ .navigation{ background: none; position:relative;} .menu_header{ padding: 0px 15px; background: #f2f2f2; z-index:2; border-bottom:1px solid #ddd;} .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;} .cross .icon_bar:first-child{ -webkit-transform: rotate(-45deg) translate(-4px, 5px); transform: rotate(-45deg) translate(-4px, 5px); opacity: 1;} .cross .icon_bar{opacity: 0; color: #000;} .cross .icon_bar:last-child{ -webkit-transform: rotate(45deg) translate(-2.5px, -5px); transform: rotate(45deg) translate(-2.5px, -5px); opacity: 1;} .nav-ul{ left:-100%; position: absolute; top: 34px; width: 100%; transition: all 0.5s ease; background: #fb5353;} .nav-ul.active{ left:0px; transition: all 0.5s ease;} .nav-ul li{ float: none; border-bottom: 1px solid #323232;} .nav-ul li a{display:block; padding: 10px 15px;} .nav-ul li:hover a{ background: #323232; color: #fff;} .dropdownmenu{ display: none; left: 0px; position:relative; top: 0px; transition:none;} .dropdownmenu ul li{ border-color: #fb5353;} .dropdownmenu li a{ padding: 10px 25px;} .dropdown li:hover a, .dropdown li.active a{ background: #4a4949; color: #fff;} .dropdownmenu .col-xs-12{ padding: 0px;} }

$(document).ready(function(e) { if(screen.width >= 768) { $(".dropdown").hover(function(){ $(".dropdownmenu").toggleClass("open"); }); } if(screen.width <= 760) { $('.menu_btn').click(function(){ $('.nav-ul').toggleClass('active'); $('.baars').toggleClass('cross'); $(".dropdownmenu").slideUp(); }); $(".dropdown").click(function(){ $(".dropdownmenu").slideToggle(); }); $('.nav-ul').click(function(e) { if( !$(e.target).hasClass('dropdownlink') ) { $(".nav-ul.active").toggleClass("active"); $('.baars.cross').toggleClass('cross'); $(".dropdownmenu").slideUp(); } }); } window.onresize = function(event) { document.location.reload(true); } });