"Mega menu slide down on hover with carousel"
Bootstrap 3.3.0 Snippet by maridlcrmn

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 ----------> <div class="container"> <nav class="navbar navbar-inverse"> <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="#">My Store</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">Men <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">Women <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="#">Store locator</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <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="#">My cart (0) items</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; }
$(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

Vue Light Bootstrap Dashboard PRO
Hover Effect Style
Different types of hover and transition effect.
Bootstrap 4 Carousel

Questions / Comments:

Hi... can i disable the slide down and up effect?

daviassumpcao () - 4 years ago - Reply 0

If you want creat a page for Men or Women clickable, add more js :

$(".dropdown-toggle").click(function (e) {

e.preventDefault();

var href = $(this).attr("href");

window.open(href);

return false;

}

);

hope to help you, guys

7kkh () - 5 years ago - Reply 0

having some dude talking and not being able to turn it off is about the dumbest thing ever tho

Jacqueline () - 7 years ago - Reply 0

Amazing

Cleiton Ferreira () - 7 years ago - Reply 0

Can anyone pls advise how can i add these Mega Manu slide hover with
carousel in my wordpress website? i will be grateful to all for valuable advise... thanks a lot.

Munna () - 7 years ago - Reply 0

Can anyone pls advise how can i add these Mega Manu slide hover with carousel? i will be grateful to all for valuable advise... thanks a lot.

Munna () - 7 years ago - Reply 0

its nice but its not overlapping the body i can see button over the drop down menu

Robby Morales () - 7 years ago - Reply 0

WOW Good One ,, Thanks

Umer Farooq () - 7 years ago - Reply 0

when i click on the men ,women dropdown isn't working what's the problem with it?please help me

Ruchira Dhananjaya Kariyawasam () - 7 years ago - Reply 0

A bit late question. Is it possible to adjust the menu height ? currently the height is set to 50px. And unable to decrease the height from 50px. Please advice.

Luckman () - 7 years ago - Reply 0

how this mega menu in mobile.. what this responsive ?

Reyy a-young () - 8 years ago - Reply 0

I want to use mega menu in existing menu, but I have problems because this taking css inherited.

How do the blue menu open as the post menu.

Example: https://goo.gl/of794u

Code: https://goo.gl/fVihyT

GalanBR () - 8 years ago - Reply 0

That was the best menu.. but I'm afraid it was not perfectly responsive design.

Ravi () - 8 years ago - Reply 0

the dropdown menu does not cover photos and buttons.....what to do?

Giba Mbatia Mnew () - 8 years ago - Reply 0

what order do you follow??? considering that there are the three codes

Giba Mbatia Mnew () - 8 years ago - Reply 0

if you have any problem understanding here is a complete tutorial http://talkerscode.com/webt...

kamal () - 8 years ago - Reply 0

it's hover on drop down does not work on window re-sizing without reloading page and i need toggle the drop down mega menu on small gadgets, can you please fix it?

Navaraj Bhattarai () - 8 years ago - Reply 0

Please, can you help me how to integrate this menu to a wordpress theme?

Mark Leon () - 9 years ago - Reply 0

now i can go home.. job done

Josiah M Nyarega () - 9 years ago - Reply 0

I just copy Html , Css , js and past css and js in new file for each all and drag , drop it in html page and put jquery.js file but it not work , pls any one can help me ?

Mohanad Mis () - 9 years ago - Reply 0

Just save as this page and see in 'Code Snippet Mega menu slide down on hover with carousel using HTML CSS Bootstrap jQuery _ Bootsnipp.com_files' folder, there is a file named 'saved_resource.html', here is whole css, html and js...

Anita Mistry () - 8 years ago - Reply 0

on this menu

"Mega menu slide down on hover with carousel"mobile view not display properly so please help me how can manage that ?

Andrew () - 9 years ago - Reply 0

Hello it is really great , i just want to add a sub menu and make it multi level , so any help please

KetimaBU () - 9 years ago - Reply 0

Great, thanks for sharing.

Ruy Santos () - 9 years ago - Reply 0

nice but experience is awkward in responsive mobile version.

Slashable () - 9 years ago - Reply 0

Yea.. thats what I thought.

Natalia suárez () - 9 years ago - Reply 0

hello maridlcrmn. i just started learning bootstrap so i found your snippet, i want to just understand how to link the add to cart to cart.

Sam () - 9 years ago - Reply 0

very beautiful but how ca I center the menu items men women store locator

ninjax elite (Magamet) () - 9 years ago - Reply 0

It's nice but it doesn't work for me on a mobile device: the men and women menu won't open when hovering or sometimes they will but the content starts jiggling and the whole thing is unusable. Is it just me ?

pidl () - 9 years ago - Reply 0

:D if you want to work on a mobile device , you should try to replace "400" to "fast" in JS . It works for me.

Tùng Ruddy () - 7 years ago - Reply 0

There's a reason Bootstrap chose for the click-method instead of hover. This snippet ignores that choice. You can change the JS to use the `.on('click', function(){...})` instead of `.hover()`.

Ken Verhaegen () - 9 years ago - Reply 0

Hey Ken,

I know you posted a year ago--but any insight on how to get the carousels (next) and (previous) within the dropdown to work after changing the event to onclick? onclick works great but unfortunatley the next click closes the menu.

Shawn White () - 8 years ago - Reply 0

So, anyone knows how to change the JS so it will still hover on desktop en will be clickable on mobile devices???

Johan Stam () - 8 years ago - Reply 0

No, it's not just you. The dropdown menu doesn't open to display the list of top-level menu items once I size a browser window to a mobile screen size. Snippet looks good here, but while it does display the top-level menu items in dropdown, when you click on any one of those, its list of links fails to open. I've tried in Chrome & Firefox, latest versions. Frustrating, so it seems like this one isn't fully baked yet. I look forward to when it is!

rlhinirv57 () - 9 years ago - Reply 0

:D if you want to work on a mobile device , you should try to replace "400" to "fast" in JS.

Tùng Ruddy () - 7 years ago - Reply 0

Best mega menu for Bootstrap I've ever seen!

Ricardo Barantini () - 9 years ago - Reply 0

is there anyway to decrease the sub-menu drop-down time? I increased the '400' (time I think), in the js file but it didn't change anything. This is a great menu as is, however I would really like to be able to slow down the drop-down time if possible.
Great menu, thanks for sharing!

Okay-dot-com () - 9 years ago - Reply 0

The value should not be surrounded with double or single quotes.
In this case just remove double quotes and change the value to your desired value.

$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown(1000);
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp(1000);
$(this).toggleClass('open');
}
);
});

Reza A. () - 9 years ago - Reply 0

Please can someone tell me how I can download the source code

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

You can download this snippet resource once it is marked as featured. They have not yet updated the page but I already submitted.

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

Just copy the code between html, css and js tabs, create a html file, a css and js file and paste in each file, save and link the css and js in html file.

Thiago Silva () - 9 years ago - Reply 0

Hi, when I try this , I see menu rendered vertically instead of horizontally. what im missing here ?

Prafull () - 7 years ago - Reply 0

Great snippet, thanks for sharing.

Terry Reynolds () - 9 years ago - Reply 0