SooperFish is a highly configurable solution for animated dropdown menus. It combines the features of superfish, structured programming of Droppy and a ton of new features like multi-column dropdown menus and configurable show AND hide animation with custom easing.

It was originally created to power the drop-down menus for the premium drupal themes on this site and now it's avaiable to anyone.

Demo:

Also check the Synopsis premium drupal theme for an excellent demonstration of SooperFish combined with Cufon!

Download:

edit 29-12-2011: Due to the jQuery repository having problems I've put SooperFish on github:

https://github.com/jjroelofs/jQuery-SooperFish

http://plugins.jquery.com/project/SooperFish

Feature List:

• Automatic dual or triple columns based on number of child menu items
• Optional delay before hiding menu on mouse-out
• Optional automatic indicator arrows (in black or white)
• Configurable show AND hide animations
• Custom easing supported
• Works with jQuery backlava plugin (optionally)
• Works fine with Javascript disabled
• Comes with several free themes to demonstrate styling
• 3.65kb uncompressed
• 2.01kb minified

Todo List:

• Fix keyboard accessibility, menu should work with tabbing in absence of mouse input

This plugin works with jQuery 1.2.6 and higher, haven't tested it with anything lower.

Code for demo:

This goes in your header:

{syntaxhighlighter brush: xml} {/syntaxhighlighter}

ul.sf-menu should be adapted to point to your own menu, using a CSS selector.

Using the features:

Here is a more advanced usage of sooperfish, with overrides for most of the settings:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('#header > div > ul').sooperfish({ hoverClass: 'over', delay: '400ms', dualColumn: 7, tripleColumn: 14, animationShow: {height:'show',opacity:'show'}, speedShow: '800ms', easingShow: 'easeOutTurbo2', animationHide: {width:'hide',opacity:'hide'}, speedHide: '400ms', easingHide: 'easeOutTurbo', autoArrows: false }); }); {/syntaxhighlighter}

Example simple usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish(); }); {/syntaxhighlighter}

Example intermediate usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish({ animationShow: {'width':'show'}, speedShow: 400, animationHide: {'width':'hide'}, speedHide: 100 }); }); {/syntaxhighlighter}

Example advanced usage:

{syntaxhighlighter brush: jscript} $(document).ready(function() { $('ul.sf-menu').sooperfish({ dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns tripleColumn : 8, //if a submenu has at least this many items it will be divided in 3 columns hoverClass : 'sfHover', delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen animationShow : {width:'show',height:'show',opacity:'show'}, speedShow : 750, easingShow : 'easeOutBounce', animationHide : {width:'hide',height:'hide',opacity:'hide'}, speedHide : 300, easingHide : 'easeInOvershoot', autoArrows : true }); }); {/syntaxhighlighter}

Work in Progress

If you spot a bug or want a feature, feel free to drop a comment or file an issue at the jQuery plugin page