# Presenting SooperFish: jQuery plugin for Multi-Column Dropdown Menus

 

 November 13, 2023 

 

 

 

 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](https://www.sooperthemes.com) on this site and now it's avaiable to anyone.

### Demo:

[![](https://www.sooperthemes.com/sites/default/files/SooperFish/demoimg.png)](https://www.sooperthemes.com/sites/default/files/SooperFish/example.html "View SooperFish Menu in New Window")

   
Also check the [Synopsis premium drupal theme](https://www.sooperthemes.com) 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} 
		// initialise plugins
    $(document).ready(function() {
      $('ul.sf-menu').sooperfish();
    });
		 {/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 &gt; div &gt; 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:

- [Orginial suckerfish technique](http://www.alistapart.com/articles/dropdowns)
- [Superfish](http://users.tpg.com.au/j_birch/plugins/superfish/)
- [Droppy](http://onehackoranother.com/projects/jquery/droppy/)
- [jQuery easing plugin](http://gsgd.co.uk/sandbox/jquery/easing/)
- [jQuery](http://jquery.com/)
 
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.





## Share this Article

 <a class="a2a_button a2a_button_x"></a><a class="a2a_button a2a_button_linkedin"></a>