"v4 - Megamenu (1)"
Bootstrap 3.3.0 Snippet by serhatkaraca

<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" style="width:100%; padding:0;"> <nav class="navbar navbar-inverse" id="menuBar"> <div class="row"> <div class="navbar-padding"></div> </div> <div class="row" id="topBar"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <a class="navbar-brand" href="#">Brand</a> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-left" style="color:#fff;"> <li><a href="#">Watch Live</a></li> <li>S</li> <li>O</li> <li>C</li> <li>I</li> <li>A</li> <li>L</li> </ul> <ul class="nav navbar-nav navbar-right" id="searchBox"> <form> <input type="text" name="search" placeholder="Search here"> </form> </ul> </div> <!-- /.navbar-collapse --> </div> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav navbar-right" id="searchBox"> <form> <input type="text" name="search" placeholder="Search here"> </form> </ul> </div> <div class="collapse navbar-collapse js-navbar-collapse text-center"> <ul class="nav navbar-nav navbar-list"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">TOPICS <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Men Collection</li> <div id="menCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#menCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">REGIONS <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> <li class="divider"></li> <li class="dropdown-header">Fonts</li> <li><a href="#">Glyphicon</a></li> <li><a href="#">Google Fonts</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Pull Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down on Hover</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Women Collection</li> <div id="womenCollection" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- /.carousel --> <li class="divider"></li> <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li> </ul> </li> </ul> </li> <li><a href="#">SECTIONS</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">OPINION <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> <li><a href="#">MAGAZINE</a></li> <li><a href="#">VIDEO</a></li> </ul> </div> <!-- /.nav-collapse --> </nav> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } .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: 0; } .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; } .navbar-right input{ background-color:#222 !important; color:#fff; } .navbar-padding{ margin-top:20px; } #navbar-collapse-1{ margin-top:15px; } .navbar-list>li>a{ font-weight:bold; color:#fff !important; letter-spacing:0.5px; padding:20px 30px; } .navbar-nav .caret{ display:none; } .navbar-header .navbar-brand{ position: absolute; width: 200px; left: 0; top: 0; text-align: center; margin: auto; right: 0; } @media (min-width: 720px) { .navbar-nav { float: none; margin: 0; display: inline-block; } .navbar-nav li { float:none; display: inline-block; } .navbar-header .navbar-brand{ display:none; } } @media screen and (max-width: 940px) and (min-width: 768px){ .navbar-left{ margin-left:40px !important; } .navbar-right{ margin-right:40px !important; } .navbar-list>li>a{ padding:20px; } .navbar-header .navbar-brand{ display:none; } } @media screen and (max-width: 768px) and (min-width: 651px){ #topBar .navbar-header{ display:none; } #topBar #navbar-collapse-1{ display:block; visibility:visible; border:none; box-shadow:none; margin:0; min-height:90px; } #navbar-collapse-1 .navbar-left{ margin:0px 0px 0px 40px !important; line-height:90px; display:inline-block; } #navbar-collapse-1 .navbar-right{ margin:27px 40px 0px 0px !important; float:right; display:inline-block; } #searchBox input[type=text]:focus{ width:200px !important; background-position:150px 10px !important; } #menuBar .navbar-header{ display:none; } #menuBar .navbar-collapse{ display:block; visibility:visible; border:none; box-shadow:none; } .navbar-list>li>a { padding:15px 21px; } .navbar-nav li { float:none; display: inline-block; } .navbar-header .navbar-brand{ display:none; } } @media screen and (max-width:650px){ #menuBar .navbar-padding{ display:none; } #topBar { display:none; } #navbar-collapse-1 .navbar-right{ display:inline-block; } .navbar-header .navbar-toggle { float:left; margin-left:15px; border:none; background-color:transparent !important; } .navbar-header #searchBox { display:inline-block !important; } .navbar-header #searchBox input[type=text]:focus{ width:150px; border:none; outline:none; background-position:110px 10px !important; } } #topBar{ position:relative; min-height:90px; } #topBar .navbar-brand { position: absolute; width: 200px; left: 0; top: 19px; text-align: center; margin: auto; right: 0; } #topBar .navbar-toggle { z-index:3; } #menuBar { border:none; } .navbar-header #searchBox { margin:0; float:right; margin-top:4px; display:none; } /*SEARCH BOX*/ #searchBox input[type=text] { width: 13px; box-sizing: border-box; border:0; outline: none; font-size: 16px; background-color: white; background-image: url('https://www.w3schools.com/howto/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; float:right; } #searchBox input[type=text]:focus { width: 300px; border-top: 0; border-right:0; border-left:0; border-bottom: 1px solid #ddd; background-position:250px 10px; padding-left:12px; }
$(document).ready(function(){ $(".dropdown").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: