my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

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

Written by: Yohn

To get a slide down dropdown menu with bootstrap is pretty easy, and only takes a couple lines of code. You can see an example of this by hovering over the navbar links here on this site, for non members the forum link is the only one that drops down.
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


No Comments Found