"mega menu"
Bootstrap 3.2.0 Snippet by didine7231

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <nav class="navbar navbar-default" role="navigation"> <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-megadropdown-tabs"> <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="#"><img src="http://d2r8jqmejizzox.cloudfront.net/361456-853098-65x38-logofinal.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="navbar-collapse style= collapse in" id="bs-megadropdown-tabs" style=" padding-left: 0px; "> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-globe"></i> ALL</a></li> <li><a href="#"><i class="fa fa-university"></i> POLITICS</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-space-shuttle"></i> CATEGORIES <span class="caret"></span></a> <div id="filters" class="dropdown-menu mega-dropdown-menu"> <div class="container-fluid2"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="kids"> <ul class="nav-list list-inline"> <li><a data-filter=".89" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>BRICS</span></a></li> <li><a data-filter=".97" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Latin America</span></a></li> <li><a data-filter=".96" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>USA</span></a></li> <li><a data-filter=".87" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Middle East</span></a></li> <li><a data-filter=".85" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Asia</span></a></li> <li><a data-filter=".90" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Africa</span></a></li> </ul> </div> <div class="tab-pane" id="sports"> <ul class="nav-list list-inline"> <li><a data-filter=".38" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Technology</span></a></li> <li><a data-filter=".41" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Music</span></a></li> <li><a data-filter=".62" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Startups</span></a></li> <li><a data-filter=".82" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Celebrities</span></a></li> <li><a data-filter=".93" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Entertainment</span></a></li> <li><a data-filter=".94" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Series</span></a></li> </ul> </div> </div> </div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#kids" role="tab" data-toggle="tab">Countries</a></li> <li><a href="#sports" role="tab" data-toggle="tab">Top Guess</a></li> </ul> </div> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-user"></span>  <strong>Nombre</strong> <span class="glyphicon glyphicon-chevron-down"></span> </a> <ul style="background-color:white;" class="dropdown-menu"> <li> <div class="navbar-login"> <div class="row"> <div class="col-lg-4"> <p class="text-center"> <span class="glyphicon glyphicon-user icon-size"></span> </p> </div> <div class="col-lg-8"> <p class="text-left"><strong>Nombre Apellido</strong></p> <p class="text-left small">correoElectronico@email.com</p> <p class="text-left"> <a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a> </p> </div> </div> </div> </li> <li class="divider"></li> <li> <div class="navbar-login navbar-login-session"> <div class="row"> <div class="col-lg-12"> <p> <a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a> </p> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">SIGN IN <span class="caret"></span></a> <ul id="login-dp" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> Login via <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> </div> or <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required=""> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required=""> <div class="help-block text-right"><a href="">Forget the password ?</a></div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> <div class="checkbox"> <label> <input type="checkbox"> keep me logged-in </label> </div> </form> </div> <div class="bottom text-center"> New here ? <a href="#"><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
/* Credits: Code snippet by @maridlcrmn (Follow me on Twitter) Images by Nike.com (http://www.nike.com/us/en_us/) Logo by Sneaker-mission.com (http://www.sneaker-mission.com/) */ .navbar-brand { width: 70px; height: 50px; background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center; background-size: 50px; } .nav-tabs { display: inline-block; border-bottom: none; padding-top: 15px; font-weight: bold; } .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: none; border-radius: 0; } .nav-list { border-bottom: px solid #eee; } .nav-list > li { padding: 20px 15px 15px; } .nav-list > li:last-child { border-right: 0px solid #eee; } .nav-list > li > a:hover { text-decoration: none; } .nav-list > li > a > span { display: block; font-weight: bold; text-transform: uppercase; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 15px 15px; text-align: center; width: 100%; } #login-dp{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; background-color:rgba(255,255,255,.8); } #login-dp .help-block{ font-size:12px } #login-dp .bottom{ background-color:rgba(255,255,255,.8); border-top:1px solid #ddd; clear:both; padding:14px; } #login-dp .social-buttons{ margin:12px 0 } #login-dp .social-buttons a{ width: 49%; } #login-dp .form-group { margin-bottom: 10px; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } @media(max-width:768px){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } } .navbar-login { width: 305px; padding: 10px; padding-bottom: 0px; } .navbar-login-session { padding: 10px; padding-bottom: 0px; padding-top: 0px; } .icon-size { font-size: 87px; } .navbar-brand { width: 70px; height: 50px; background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center; background-size: 50px; padding-top: 7px; } .navbar-nav { padding-left: 15px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #00486c; } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color: rgb(51,79,111); } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: white; background-color: #428bca; } .navbar-default .navbar-nav>li>a { color: white; } .dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0px; margin: 2px 0px 0px; font-size: 14px; list-style: none; background-color: white; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.14902); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px; } .nav-list > li { padding: 20px 15px 15px; border-left:0px; .nav-list { border-bottom: 0px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: white; cursor: default; background-color: #428bca; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: black; cursor: default; background-color: rgb(255, 255, 255); border: solid black 1px; }
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); });

Related: See More


Questions / Comments: