"Mega menu with tabs navigation"
Bootstrap 3.2.0 Snippet by maridlcrmn

<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 ----------> <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="#"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown mega-dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <div class="dropdown-menu mega-dropdown-menu"> <div class="container-fluid"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="men"> <ul class="nav-list list-inline"> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a></li> </ul> </div> <div class="tab-pane" id="women"> <ul class="nav-list list-inline"> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a></li> </ul> </div> <div class="tab-pane" id="kids"> <ul class="nav-list list-inline"> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>Running</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a></li> </ul> </div> <div class="tab-pane" id="sports"> <ul class="nav-list list-inline"> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Basketball</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Football</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Soccer</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Men's Training</span></a></li> <li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a></li> </ul> </div> </div> </div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#men" role="tab" data-toggle="tab">Men</a></li> <li><a href="#women" role="tab" data-toggle="tab">Women</a></li> <li><a href="#kids" role="tab" data-toggle="tab">Kids</a></li> <li><a href="#sports" role="tab" data-toggle="tab">Sports</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><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="well"> <a href="https://www.twitter.com/maridlcrmn/">Code snippet inspired by the Nike website. Made with love by @maridlcrmn for @bootsnipp. Enjoy and Share!</a> </div> </div>
/* 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: 1px solid #eee; } .nav-list > li { padding: 20px 15px 15px; border-left: 1px solid #eee; } .nav-list > li:last-child { border-right: 1px 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%; }
$(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:

when i drop down it on click instead of hover and and click on tabs, large drop down get hide.

please tell how to achieve it on click and function properly.

Shuaib Khan () - 8 years ago - Reply 1


Amezing

Prem Kumar () - 8 years ago - Reply -1


Nice work, looking great with so few adds to the code. I will use it!

Webrunner () - 9 years ago - Reply -1


Good one.

rcdc chennai () - 8 years ago - Reply 0


on mouse over it doesnt work for me.anyone plz help me

jeena aby () - 8 years ago - Reply 0


Fantastic work..! Thanks

sandeep sharma () - 8 years ago - Reply 0


This was very good implementation, thank you ----maridlcrmn.

nagendra () - 9 years ago - Reply 0


Thanks, but the submenus kids,women,men,sports doesn't show for me, any suggestion ?

Yassine Teimi Özil () - 9 years ago - Reply 0


This isn't a very good implementation for mobile

Jason Espin () - 9 years ago - Reply 0


Hi Maria, is it possible to contact me ? www.myphonestore.fr

Frédéric Pelhate () - 9 years ago - Reply 0


How to use multiple navigation tabs for static website.

Kummith () - 9 years ago - Reply 0


ANyone tried it on mobile? Doesn't work well.

Kunal Gupta () - 9 years ago - Reply 0


i was used this it's working good, one small change is there

nagendra () - 9 years ago - Reply 0


Very cool

blainegarrett () - 9 years ago - Reply 0


nice one..

Vishal () - 9 years ago - Reply 0


Flickers like crazy on Firefox Developer for some reason.

Focalise () - 9 years ago - Reply 0


On the first function, change the second stop action parameter to false to fix the menu:

$('.dropdown-menu', this).stop( true, false ).slideDown("fast");

Karbonn () - 9 years ago - Reply 0


Thanks it works.

Darvath () - 9 years ago - Reply 0


Thanks, I'll try this now

Focalise () - 9 years ago - Reply 0


Great work thanks

mehediworld () - 9 years ago - Reply 0


nice work

Prabhat Kashyap () - 9 years ago - Reply 0


Beautiful

sarab () - 9 years ago - Reply 0


great menu, looks great! does anyone know where i could get some info on turning this into a Wordpress menu??
Thanks in advance.

kepbem () - 9 years ago - Reply 0


Great work!

Austin Nguyá»…n () - 9 years ago - Reply 0


Very cool.

Adam Lembert () - 9 years ago - Reply 0


Great work.. good to use in the e-commerce projects!

Miguel Machado () - 9 years ago - Reply 0


Wow, great work here. Looks great for sure :) Favorited ++

AZU () - 9 years ago - Reply 0


Really cool! Thanks a lot!

Ronaldo Scotti Dos Santos () - 9 years ago - Reply 0