"Bootstrap Mega Menu"
Bootstrap 3.3.0 Snippet by bimby18

<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"> <div class="row"> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <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> <a class="navbar-brand" href="#">Next Mega</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header no-padding">Featured Products</li> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/nature/" class="img-responsive" alt="product 1"></a> <h4><small>Summer dress floral prints</small></h4> <button class="btn btn-price" type="button">49,99 €</button> <button href="http://nextbootstrap.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/sports/" class="img-responsive" alt="product 2"></a> <h4><small>Gold sandals with shiny touch</small></h4> <button class="btn btn-price" type="button">9,99 €</button> <button href="http://nextbootstrap.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> <div class="item"> <a href="http://nextbootstrap.com"><img src="http://lorempixel.com/255/150/fashion/" class="img-responsive" alt="product 3"></a> <h4><small>Denin jacket stamped</small></h4> <button class="btn btn-price" type="button">49,99 €</button> <button href="http://definitionword.com" class="btn btn-wishlist" type="button"><span class="fa fa-heart"></span> Add to Wishlist</button> </div> <!-- End Item --> </div> <!-- End Carousel Inner --> </div> <!-- /.carousel --> <li class="divider"></li> <li><a href="http://definitionword.com">View all Collection <span class="fa fa-angle-right pull-right"></span></a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Bootstrap Mega Menu</li> <li><a href="http://definitionword.com">HTML</a></li> <li><a href="http://definitionword.com">CSS</a></li> <li><a href="http://definitionword.com">JavaScript</a></li> <li><a href="https://peexaweb.com">jQuery</a></li> <li><a href="https://peexaweb.com">Bootstrap</a></li> <li class="divider"></li> <li class="dropdown-header">Version</li> <li><a href="https://peexaweb.com">Bootstrap 3</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="https://peexaweb.com">Responsive</a></li> <li><a href="https://peexaweb.com">Easy</a></li> <li><a href="http://sirseni.com">Customizable</a></li> <li class="divider"></li> <li class="dropdown-header">Other Features</li> <li><a href="http://sirseni.com">Clean</a></li> <li><a href="http://sirseni.com">Modern</a></li> <li><a href="http://sirseni.com">User Friendly</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Designed for</li> <li><a href="http://sirseni.com">Ecommerce</a></li> <li><a href="http://nextearning.com">Corporate site</a></li> <li><a href="http://nextearning.com">Magazine </a></li> <li class="divider"></li> <li class="dropdown-header">Newsletter</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <button type="submit" class="btn btn-signin btn-block">Sign in</button> </form> </ul> </li> </ul> </li> </ul> </div> <!-- /.nav-collapse --> </nav> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; background: rgb(0,0,48); /* Old browsers */ background: -moz-linear-gradient(left, rgba(0,0,48,1) 0%, rgba(255,34,244,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,48,1) 0%,rgba(255,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,48,1) 0%,rgba(255,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */ } h1, .h1 { font-size: 36px; text-align: center; font-size: 5em; color: #404041; } .navbar-default{ background: #151433; border-radius: 0; border: none; } .navbar-default .navbar-brand { color: #2196f3; } .navbar-default .navbar-nav > li > a{ color: #999; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{ color: rgb(33,150,243); } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{ color: #fff; } .navbar-nav>li>.dropdown-menu{ background: rgb(33,150,243); /* Old browsers */ background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(146,34,244,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */ } .navbar-default .no-padding{ padding: 0; } .navbar-default .btn-price, .navbar-default .btn-wishlist , .navbar-default .btn-signin{ border-radius: 20px; background: transparent; border:1px solid rgba(255, 255, 255, 0.5); color: #FFF; } .navbar-default .form-control{ margin-bottom: 20px; background: rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 0; box-shadow: none; } .navbar-default .nav .open > a, .navbar-default .nav .open > a:hover, .navbar-default .nav .open > a:focus{ background: rgb(33,150,243); /* Old browsers */ background: -moz-linear-gradient(left, rgba(33,150,243,1) 0%, rgba(146,34,244,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(33,150,243,1) 0%,rgba(146,34,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2196f3', endColorstr='#9222f4',GradientType=1 ); /* IE6-9 */ } .navbar-default .dropdown-menu .divider{ background: rgba(255, 255, 255, 0.3); } .navbar-default h4 small{ color: rgba(255, 255, 255, 0.7); } .navbar-nav>li>.dropdown-menu { margin-top: 20px; border:none; } .navbar-default .navbar-nav>li>a { width: 130px; font-weight: bold; } .mega-dropdown { position: static !important; width: 100%; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid rgb(33,150,243); border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -14px; left: 165px; z-index: 10; } .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; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #DDD; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #fff; border-radius: 10px; background-color: rgba(255, 255, 255, 0.1); } .mega-dropdown-menu .dropdown-header { color: #FCFCFC; font-size: 18px; } .mega-dropdown-menu form { margin: 3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; } .demo-text small{ color: #bbb; } .demo-text a{ color: #fff; text-decoration: none; }
jQuery(document).on('click', '.mega-dropdown', function(e) { e.stopPropagation() })

Related: See More


Questions / Comments: