jQuery SooperFish Multi-Column Animated Drop-down

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.


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:

// initialise plugins
$(document).ready(function() {

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:

$(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

Example simple usage:

$(document).ready(function() {

Example intermediate usage:

$(document).ready(function() {
animationShow:   {'width':'show'},
speedShow:     400,
animationHide:  {'width':'hide'},
speedHide:      100

Example advanced usage:

$(document).ready(function() {
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

Leave a comment