"Mega menu with on mouse hover sub-menu"
Bootstrap 3.3.0 Snippet by anil0495

<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="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Title</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products </a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Products</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Products </li> <li class="col-sm-3">Plus Products </li> <li class="col-sm-3">Much more Products </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Customers</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Customers</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Customers </li> <li class="col-sm-3">Plus Customers </li> <li class="col-sm-3">Much more Customers </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vechiles </a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Vechiles </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Vechiles </li> <li class="col-sm-3">Plus Vechiles </li> <li class="col-sm-3">Much more Vechiles </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Installers</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Installers</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Installers </li> <li class="col-sm-3">Plus Installers </li> <li class="col-sm-3">Much more Installers </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mangers </a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Mangers </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Mangers </li> <li class="col-sm-3">Plus Mangers </li> <li class="col-sm-3">Much more Mangers </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Schdules </a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="dropdown1 col-sm-3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Schdules </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="col-sm-3">Features Schdules </li> <li class="col-sm-3">Plus Schdules </li> <li class="col-sm-3">Much more Schdules </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown1"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic); body,html { font-family: 'Open Sans', 'sans-serif'; height: 100%; background-repeat: no-repeat; background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 1px; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #ff3546; padding: 5px 60px 5px 5px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: #fff; border-color: #337ab7; } /*Login Screen Style*/ .card-container.card { max-width: 350px; padding: 40px 40px; } .btn { font-weight: 700; height: 36px; -moz-user-select: none; -webkit-user-select: none; user-select: none; cursor: default; } /* * Card component */ .card { background-color: #F7F7F7; /* just in case there no content*/ padding: 20px 25px 30px; margin: 0 auto 25px; margin-top: 50px; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .profile-img-card { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* * Form styles */ .profile-name-card { font-size: 16px; font-weight: bold; text-align: center; margin: 10px 0 0; min-height: 1em; } .reauth-email { display: block; color: #404040; line-height: 2; margin-bottom: 10px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-signin #inputEmail, .form-signin #inputPassword { direction: ltr; height: 44px; font-size: 16px; } .form-signin input[type=email], .form-signin input[type=password], .form-signin input[type=text], .form-signin button { width: 100%; display: block; margin-bottom: 10px; z-index: 1; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { border-color: rgb(104, 145, 162); outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px ; /* box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px ;*/ } .btn.btn-signin { /*background-color: #4d90fe; */ /* background-color: rgb(104, 145, 162);*/ /* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ padding: 0px; font-weight: 700; font-size: 14px; height: 36px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none; -o-transition: all 0.218s; -moz-transition: all 0.218s; -webkit-transition: all 0.218s; transition: all 0.218s; } .btn.btn-signin:hover, .btn.btn-signin:active, .btn.btn-signin:focus { background-color: rgb(97, 133, 150); } .forgot-password { color: rgb(104, 145, 162); } .forgot-password:hover, .forgot-password:active, .forgot-password:focus{ color: rgb(12, 97, 33); } /*Login screen End*/
$(document).ready(function(){ $(".dropdown1").hover( function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); $(this).toggleClass('open'); } ); });

Related: See More


Questions / Comments:

menu is not working on mobile view

anand () - 2 years ago - Reply 0