"Bootstrap Mega Menu"
Bootstrap 3.3.0 Snippet by majewskibc

Post to Facebook Tweet this

<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 ----------> <section id="submenu" class="navbar-inverse"> <nav class="navbar"> <div class="xcollapse xnavbar-collapse xjs-navbar-collapse"> <ul class="nav navbar-nav"> <li id="topmenu-blogi" class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle mega-dropdown-toggle" data-toggle="dropdown">Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" 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/ef5e55/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 --> </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">Blogi merytoryczne</li> <li><a href="/blog/marketingekspercki">Marketing Ekspercki</a></li> <li><a href="/blog/kdb">Kwadrans dla Biznesu</a></li> <li><a href="/blog/cneb">CzasNaE-Biznes</a></li> <li><a href="/blog/piotr">Piotr Majewski</a></li> <li class="divider"></li> <li class="dropdown-header">Blogi produktowe</li> <li><a href="#">Ekademia</a></li> <li><a href="#">impleBOT</a></li> <li><a href="#">impleSITE</a></li> <li><a href="#">impleFUNNEL</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wiedza</li> <li><a href="#">Gdańska Akademia Biznesu</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Eventy</li> <li><a href="#">MAKE the CHANGE</a></li> <li><a href="#">Konferencja CzasNaE-Biznes</a></li> <li><a href="#">Konferencja Marketing Ekspercki</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Usługi SaaS</li> <li><a href="#">Platforma sprzedażowa</a></li> <li><a href="#">Platforma e-learningowa</a></li> <li><a href="#">E-Mail Marketing</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Zwiększanie sprzedaży</a></li> <li class="divider"></li> <li class="dropdown-header">Inne usługi</li> <li><a href="#">Konsultacje</a></li> <li><a href="#">Wdrożenia</a></li> </ul> </li> </ul> </li> <li id="topmenu-eventy" class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle mega-dropdown-toggle" data-toggle="dropdown">Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" 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/ef5e55/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 --> </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">Blogi merytoryczne</li> <li><a href="/blog/marketingekspercki">Marketing Ekspercki</a></li> <li><a href="/blog/kdb">Kwadrans dla Biznesu</a></li> <li><a href="/blog/cneb">CzasNaE-Biznes</a></li> <li><a href="/blog/piotr">Piotr Majewski</a></li> <li class="divider"></li> <li class="dropdown-header">Blogi produktowe</li> <li><a href="#">Ekademia</a></li> <li><a href="#">impleBOT</a></li> <li><a href="#">impleSITE</a></li> <li><a href="#">impleFUNNEL</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wiedza</li> <li><a href="#">Gdańska Akademia Biznesu</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Eventy</li> <li><a href="#">MAKE the CHANGE</a></li> <li><a href="#">Konferencja CzasNaE-Biznes</a></li> <li><a href="#">Konferencja Marketing Ekspercki</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Usługi SaaS</li> <li><a href="#">Platforma sprzedażowa</a></li> <li><a href="#">Platforma e-learningowa</a></li> <li><a href="#">E-Mail Marketing</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Zwiększanie sprzedaży</a></li> <li class="divider"></li> <li class="dropdown-header">Inne usługi</li> <li><a href="#">Konsultacje</a></li> <li><a href="#">Wdrożenia</a></li> </ul> </li> </ul> </li> <li id="topmenu-produkty" class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle mega-dropdown-toggle" data-toggle="dropdown">Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" 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/ef5e55/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 --> </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">Blogi merytoryczne</li> <li><a href="/blog/marketingekspercki">Marketing Ekspercki</a></li> <li><a href="/blog/kdb">Kwadrans dla Biznesu</a></li> <li><a href="/blog/cneb">CzasNaE-Biznes</a></li> <li><a href="/blog/piotr">Piotr Majewski</a></li> <li class="divider"></li> <li class="dropdown-header">Blogi produktowe</li> <li><a href="#">Ekademia</a></li> <li><a href="#">impleBOT</a></li> <li><a href="#">impleSITE</a></li> <li><a href="#">impleFUNNEL</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wiedza</li> <li><a href="#">Gdańska Akademia Biznesu</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Eventy</li> <li><a href="#">MAKE the CHANGE</a></li> <li><a href="#">Konferencja CzasNaE-Biznes</a></li> <li><a href="#">Konferencja Marketing Ekspercki</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Usługi SaaS</li> <li><a href="#">Platforma sprzedażowa</a></li> <li><a href="#">Platforma e-learningowa</a></li> <li><a href="#">E-Mail Marketing</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Zwiększanie sprzedaży</a></li> <li class="divider"></li> <li class="dropdown-header">Inne usługi</li> <li><a href="#">Konsultacje</a></li> <li><a href="#">Wdrożenia</a></li> </ul> </li> </ul> </li> <li id="topmenu-uslugi" class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle mega-dropdown-toggle" data-toggle="dropdown">Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" 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/ef5e55/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 --> </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">Blogi merytoryczne</li> <li><a href="/blog/marketingekspercki">Marketing Ekspercki</a></li> <li><a href="/blog/kdb">Kwadrans dla Biznesu</a></li> <li><a href="/blog/cneb">CzasNaE-Biznes</a></li> <li><a href="/blog/piotr">Piotr Majewski</a></li> <li class="divider"></li> <li class="dropdown-header">Blogi produktowe</li> <li><a href="#">Ekademia</a></li> <li><a href="#">impleBOT</a></li> <li><a href="#">impleSITE</a></li> <li><a href="#">impleFUNNEL</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wiedza</li> <li><a href="#">Gdańska Akademia Biznesu</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Eventy</li> <li><a href="#">MAKE the CHANGE</a></li> <li><a href="#">Konferencja CzasNaE-Biznes</a></li> <li><a href="#">Konferencja Marketing Ekspercki</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Usługi SaaS</li> <li><a href="#">Platforma sprzedażowa</a></li> <li><a href="#">Platforma e-learningowa</a></li> <li><a href="#">E-Mail Marketing</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Zwiększanie sprzedaży</a></li> <li class="divider"></li> <li class="dropdown-header">Inne usługi</li> <li><a href="#">Konsultacje</a></li> <li><a href="#">Wdrożenia</a></li> </ul> </li> </ul> </li> <li id="topmenu-pomoc" class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle mega-dropdown-toggle" data-toggle="dropdown">Menu <span class="glyphicon glyphicon-chevron-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">New in Stores</li> <div id="myCarousel" 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/ef5e55/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 --> </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">Blogi merytoryczne</li> <li><a href="/blog/marketingekspercki">Marketing Ekspercki</a></li> <li><a href="/blog/kdb">Kwadrans dla Biznesu</a></li> <li><a href="/blog/cneb">CzasNaE-Biznes</a></li> <li><a href="/blog/piotr">Piotr Majewski</a></li> <li class="divider"></li> <li class="dropdown-header">Blogi produktowe</li> <li><a href="#">Ekademia</a></li> <li><a href="#">impleBOT</a></li> <li><a href="#">impleSITE</a></li> <li><a href="#">impleFUNNEL</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wiedza</li> <li><a href="#">Gdańska Akademia Biznesu</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Eventy</li> <li><a href="#">MAKE the CHANGE</a></li> <li><a href="#">Konferencja CzasNaE-Biznes</a></li> <li><a href="#">Konferencja Marketing Ekspercki</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Usługi SaaS</li> <li><a href="#">Platforma sprzedażowa</a></li> <li><a href="#">Platforma e-learningowa</a></li> <li><a href="#">E-Mail Marketing</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Zwiększanie sprzedaży</a></li> <li class="divider"></li> <li class="dropdown-header">Inne usługi</li> <li><a href="#">Konsultacje</a></li> <li><a href="#">Wdrożenia</a></li> </ul> </li> </ul> </li> </ul> </div> </nav> </section> <h1 class="c-text"> Bootstrap Mega Menu </h1>
.navbar-nav>li>.mega-dropdown-menu { margin-top: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .mega-dropdown-toggle { width: 100px; font-weight: normal; } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } .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: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight: bold; } .mega-dropdown-menu form { margin: 3px 20px; } .mega-dropdown-menu .form-group { margin-bottom: 3px; }

Questions / Comments: