Bootstrap V2 Sliding Dropdown Menus

Twitter Bootstrap .^. Website Tutorials | Submited Nov 15, 2012

Written by: Yohn

You can add the following to your own JavaScript file to get the navbar dropdown menus to slide down.

Code:
$('.navbar .dropdown').hover(function() {
	$(this).find('.dropdown-menu').first().stop(true, true).slideDown()
}, function() {
	$(this).find('.dropdown-menu').first().stop(true, true).slideUp('fast')
});

I also use a delay within there, before the slideDown() and slideUp() function so it waits before this happens, and i had to add another class to my CSS for the link to have a "hover" like background image. Heres the actual function I'm using for the dropdown menus on Skem9 currently

Code:
$('.navbar .dropdown').hover(function() {
	$(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
	var na = $(this)
	na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

the extra-nav-class is what puts the background image within my navbar, so if you want that feature you'll have to add that to your css with your own styling. The delay() function I'm using has the DOM wait before it does the next step, so the dropdown menu doesnt slide out when the user quickly hovered over the link

0 Like Add to Favorites