"Mega menu with carousel for Stores"
Bootstrap 3.1.0 Snippet by maridlcrmn

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <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="#">MegaMenu</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">Collection <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">Dresses</li> <li><a href="#">Unique Features</a></li> <li><a href="#">Image Responsive</a></li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Newsletter Form</a></li> <li><a href="#">Four columns</a></li> <li class="divider"></li> <li class="dropdown-header">Tops</li> <li><a href="#">Good Typography</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Jackets</li> <li><a href="#">Easy to customize</a></li> <li><a href="#">Glyphicons</a></li> <li><a href="#">Pull Right Elements</a></li> <li class="divider"></li> <li class="dropdown-header">Pants</li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons & Default</a></li> <li><a href="#">Calls to action</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Accessories</li> <li><a href="#">Default Navbar</a></li> <li><a href="#">Lovely Fonts</a></li> <li><a href="#">Responsive Dropdown </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-primary btn-block">Sign in</button> </form> </ul> </li> </ul> </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'; background:#f0f0f0; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:4px; border-top-right-radius:4px; } .navbar-default .navbar-nav>li>a { width:200px; 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 #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; }

Related: See More


Questions / Comments:

really impressive ! thanks lot. one more thing, i wish to add sub-menus for list items inside mega-menu, how to achieve that please reply soon

Dilbar Negi () - 2 years ago - Reply 0


Great Work!! and thank you.

Elton Almeida () - 3 years ago - Reply 0


Hi @maridlcrmn:disqus

Awesome and great work. I have a question. I have been testing the menu and I have a small issue, I filled the menu with many items and happens that the items in the lower part can not being seen in part or at all, I have been touching here and there the css to place a scrollbar in the menu but I have not reached to a possible solution yet. Is there a way to place a scrollbar on this situation?

JB

Juan Boada () - 3 years ago - Reply 0


Hi - great looking menu. Does not seem to be compatible with Bootstrap 3.3.5. Everything looks good, mega menus work beautifully in desktop size. But when I resize browser window to mobile size and click the menu dropdown toggle, nothing happens: the menu items simply don't show up at all. Installed or linked to bootstrap 3.3.5: bootstrap.min.js, bootstrap.min.css, jquery-1.11.0.min.js. Any suggestions? Note: I did add other menu items. Copied the first <ul> under the first dropdown div <ul class="nav navbar-nav"> several times for the links needed. Tags closed? Check.

rlhinirv57 () - 3 years ago - Reply 0


Outstanding work maridlcrmn!

Air2air () - 3 years ago - Reply 0


please how can I download it for use in my new website

Musa Adamu Salihu () - 4 years ago - Reply 0


Hi., Great work !!

one thing i want to know .,
how i change the font style for the collection text ??
any one kindly help me on this..
thanks in advance ..

Karthick manoharan () - 4 years ago - Reply 0


I'm facing trouble to use this- http://prntscr.com/6uqxzl

Can I get the source files?

Mofizul Islam () - 4 years ago - Reply 0


Dear , I See Your Work. And Its Good. I Need Your Help If You Don't Have Any Problem In It.

Currently I Am Trying To Build An HRM Application Using (BRACKET) Bootstrap Admin Theme.

I am Using Arabic Language , So The Menu Is On Right Hand Side.

Is There Any Example Which A Right Hand Navigation Have MEGA Menu ?

Mansoor Ahmed () - 4 years ago - Reply 0


Have you seen a 3 level dropdown menu example that looks like the main menu at www.intel.com. Does it look like they use Bootstrap and or Jquery?

Scott Wissler () - 4 years ago - Reply 0


Fantastic job indeed !!!

dana () - 4 years ago - Reply 0


Hi! I like it, but is there a way to make another one in one row instead of two, every time I add a <li> to my <nav bar=""> , it would add it in a different row, any comments on this ? Thanks!

Adriana () - 4 years ago - Reply 0


I absolutely LOVE this. How can I turn this into a vertical megamenu where it opens out to the right?

Alesha Randolph () - 4 years ago - Reply 0


Great!

allaghi () - 4 years ago - Reply 0


I am unable to download related javascript

Bhaskar Chilukuri () - 4 years ago - Reply 0


hi. I changed "add to wishlist" button but it doesn't navigate to page I want to go. it navigates to homepage itself. do you know why?

and I used for loop to get sub categories like under dresses category. I am using the mega menu in base.html but only for loop doesn't work when I open mega menu on different pages, for example add product page. it only works on homepage. do you know why :/ (menu itself is shown in add product page, collection opens but only sub categories don't appear)

bonqhie () - 4 years ago - Reply 0


Astounding code !

But there's something i cannot grasp.
When I duplicate the mega menu in the same <div>

<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">...

Then the part with the white arrow
.mega-dropdown-menu:before {
.mega-dropdown-menu:after {

is not working correctly. the arrow still refers to the other mega-menu, not the current

thanks for help

gatmanu () - 4 years ago - Reply 0


awesome !

Hasan Zahran () - 4 years ago - Reply 0


Hi, it looks great! Well done!

Is there a way to adapt this for Bootstrap 2 ?

Carlo () - 4 years ago - Reply 0


So cool !!

gocreating () - 4 years ago - Reply 0


Does anyone know of a menu like this one but made dynamic in WordPress...? If so can you share the code? or any recourse to help.

Omar Habash () - 4 years ago - Reply 0


You would need to make some sort of plugin to achieve this functionality. Look into hiring a freelancer.

maxsurguy () - 4 years ago - Reply 0


Hello,

I like it but I can't use it in odoo (previously openerp) it seems it's because it's bootstrap 3.1 and odoo is 3.2 any idea about how upgrade it?

Thanks

Sylvain

Sylvain () - 4 years ago - Reply 0


I see in the source code these two lines
<li class="dropdown-header">New in Stores</li>
<div data-ride="carousel" class="carousel slide" id="myCarousel">

How is this possible?

أبو ابراهيم () - 4 years ago - Reply 0


Anybody else having problems getting this to work on iPhone and Windows Phone? Submenus take a long time to open, long enough for user to think menu isn't working, and if you remove the carousel, than it doesn't work at all, it's alwas hidden. Something is apparently blocking this. On Android it works great.

Problematic () - 4 years ago - Reply 0


I have a WP and it works perfectly, can not say the same for the iPhone, can someone please try again and tell me what may be failing?, thanks

Maria del Carmen () - 4 years ago - Reply 0


This is what I was searching on internet. It make my work easier.

shehbaz1992 () - 4 years ago - Reply 0


Glad to hear! Enjoy!

maxsurguy () - 4 years ago - Reply 0


This is just what I was expecting... Thank you so much !

Webrunner () - 5 years ago - Reply 0


This looks great!

Joshua () - 5 years ago - Reply 0


Thanks Joshua.

Maria del Carmen () - 4 years ago - Reply 0


Looks awesome! Great work!

I think it would be pretty cool to put in a < left and right > nav for the carousel. Maybe on the same line as "New in Stores", pulled-right. Just a thought.

Looks great anyway though.

-Kraymer

Kraymer () - 5 years ago - Reply 0


Thanks for your comment, I will work on it. I had tried to do so, in fact that was the idea, but if I gave click on the navigation buttons the dropdown was closed and could not display the carousel, now I found a way to make it work but I am very jealous for publication (LOL), wait a few days and I will gladly post.

Greetings.

Maria del Carmen () - 4 years ago - Reply 0


You can prevent the menu from closing when the carousel buttons are clicked by adding the following jquery script to your page to intercept the click, and manually calling the event to move slider.

$('.carousel-control.left').click(function () {

event.stopPropagation();

$('#myCarousel').carousel('prev');

});

$('.carousel-control.right').click(function () {

event.stopPropagation();

$('#myCarousel').carousel('next');

});

tragoh () - 4 years ago - Reply 0


Great Snippet!

I am having this same issue on your snippet here;

http://bootsnipp.com/snippe...

MegaMenu closes when trying to use carousels inside dropdown. I used the code above and changed #myCarousel to #menCollection. MegaMenu still closes on click of next or previous.

What am I doing wrong?

Shawn White () - 2 years ago - Reply 0


thank u so much !!

Karthick manoharan () - 4 years ago - Reply 0