Animating your dropdown menu
Published January 11th, 2010 under General
In our IE Hovers post we outlined how the Superfish jQuery plugin can be used to create a smooth flowing animated effect for your dropdown menu. However the Superfish script is reasonably large and many people don’t require the various options which are available with the Superfish plugin. So here is an explanation of a new way to create smooth animated dropdown menus with only a few lines of code (plus jQuery).
The following code will produce a clean smooth flowing animation effect just like you can see in the menu above for our own site.
function suckerfishmenu(){
$('#suckerfishnav ul').css({display:'none'}); // Opera Fix
$('#suckerfishnav li').hover(function(){
$(this).find('ul:first').css({display:'none'}).slideDown(300);
},function(){
$(this).find('ul:first').css({display:'none'});
});
}
$(document).ready(function(){
suckerfishmenu();
});
To make this work, you simply need to insert the above code after you load jQuery and between the <head> tags for your page and use a dropdown menu with an ID of #suckerfishnav. Make sure you reference the jQuery.js file correctly (available here). If you are using WordPress, then you will want to make sure you are loading jQuery via the enqueue method to avoid clashes with plugins which use jQuery and add var $ = jQuery; to ensure that jQuery works with the non-conflict mode of the version of jQuery version bundled with WordPress.
If all of that seems too complicated, don’t despair as the new version coming soon of our PixoPoint Menu plugin has this new animation method built in so that you won’t need to touch any code to get it working.
