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

<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> <ul id="menu-primary-navigation" class="nav navbar-nav"><li class="menu-caviar"><a href="product-category/caviar/">Caviar</a></li> <li class="menu-truffles-etc"><a href="product-category/truffles-etc/">Truffles, Etc.</a></li> <li class="mega-dropdown active dropdown menu-other-items"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Other Items <b class="caret"></b></a> <div class="dropdown-menu mega-dropdown-menu" style=""><ul class="nav nav-tabs"> <li class="all mixitup-filter-override menu-view-all" data-filter=".product-cat-all"><a href="product-category/all/">View All</a></li> <li class="mixitup-filter-override menu-truffles-etc" data-filter=".product-cat-truffles-etc"><a href="product-category/all/?filter=truffles-etc">Truffles, Etc.</a></li> <li class="mixitup-filter-override menu-foie-gras-duck-products" data-filter=".product-cat-foie-gras-duck-products"><a href="product-category/all/?filter=foie-gras-duck-products">Foie Gras & Duck Products</a></li> <li class="mixitup-filter-override menu-caviar-accompaniments" data-filter=".product-cat-caviar-accompaniments"><a href="product-category/all/?filter=caviar-accompaniments">Caviar Accompaniments</a></li> <li class="mixitup-filter-override menu-accessories" data-filter=".product-cat-accessories"><a href="product-category/all/?filter=accessories">Accessories</a></li> <li class="mixitup-filter-override menu-olive-oils-vinegars" data-filter=".product-cat-olive-oils-vinegars"><a href="product-category/all/?filter=olive-oils-vinegars">Olive Oils & Vinegars</a></li> <li class="mixitup-filter-override menu-condiments-salts" data-filter=".product-cat-condiments-salts"><a href="product-category/all/?filter=condiments-salts">Condiments & Salts</a></li> </ul></div> </li> <li class="menu-gifts"><a href="product-category/gifts/">Gifts</a></li> <li class="menu-store-events"><a href="events/">Store & Events</a></li> <li class="dropdown menu-about-us"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="about/">About Us <b class="caret"></b></a> <ul class="dropdown-menu" style="display: none;"> <li class="menu-our-story"><a href="about/">Our Story</a></li> <li class="menu-sustainability"><a href="sustainability/">Sustainability</a></li> <li class="menu-policies"><a href="policies/">Policies</a></li> </ul> </li> <li class="active menu-faq"><a href="faq/">FAQ</a></li> <li class="menu-recipes"><a href="recipe/">Recipes</a></li> <li class="menu-contact"><a href="contact/">Contact</a></li> </ul> </nav> xxx <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> xxx
.mega-dropdown { position: static !important; } .mega-dropdown-menu { top:0; 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: