Presenting SooperFish: jQuery plugin for Multi-Column Dropdown Menus

June 03, 2010

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

Credits:

SooperFish could not have been built without the foundations from:

If there is any interest in the topic, I can write a blog post about how to integrate the plugin with your Drupal theme and have all the configuration options in the Drupal theme settings form.