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

Update: This plugin has materialized, check out the SooperFish jQuery multi-column drop-down plugin

From previous blog posts I've learned that multi column / animated dopdown menus are really in demand. I've now pretty much completed a new jQuery plugin that handles all this. At first I started modifying superfish but I had learned that superfish uses some really funky events bindings and event handling which caused the submenu-hide animations to fail on sub-sub menus, and there were some other weird bugs.

So I spent the whole day coding a new plugin based on the much leaner jQuery droppy plugin and had a much better time working up from there! So now I thought why stop now, maybe someone can think of some cool features that I haven't yet implemented.

Here is an overview of the options it currently takes:

As you can see it also uses custom easing!

If you can think of any cool behaviours that can be added to this plugin don't hesitate to drop a comment!

And no, it does not magically allow you to create true mega-dropdown menus with blocks and grouped menus and all. Unfortunately I lack the skills and understanding to create a decent module that somehow combines Drupals otherwise awesome menu system with blocks and views
.
Though if you are interested in this have a look here:
http://drupal.org/node/778452
http://drupal.org/project/megamenu

Some advantages of this jQuery plugin (compared with superfish):

1. Automatic multicolumns submenus
2. Full configurable animations
3. Custom easing support
4. menu-Hide animation
5. Dropped hoverIntent plugin in favor of simple setTimeOut on mouseOut.
6. Optional automatic submenu indicator arrows available in black and white
7. All new CSS, more compact and easy to skin
8. Readable, documented and well organised jQuery code. Though I must admit I'm not a top notch programmer and the code is very verbose, but if you're a beginner you'll love it.

I'm working on a new framework for dropdown menus and I'm running out of ideas. So far I got:

1. Animation on showing as well as hiding the menu (superfish only supports on-show)
2. Automatic configurable multi-column dropdowns. When number of items in a submenu exceeds set number a submenu is 2 columns, or 3 columns. (will look like http://www.whitehouse.gov)
3. Added support for custom easing, including the additional easing from the jQuery easing plugin and some homebrew easing*.
4. Animated properties are configurable (widh/height/opacity)

So what cool menu feature would you like to have on your next Drupal site? drop your idea in the comments!

*my new and favorite dropdown easing:

  easeInOvershootTurbo: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*t*((s+1)*t - s) + b;
  },
  easeOutOvershootTurbo: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*t*((s+1)*t + s) + 1) + b;
  }

Thanks:

• Paul O’B from Sitepoint Forums for helping with researching for my holy grail of flexible Drupal CSS layouts.
• John Albin from the Zen theme, for being a leader in Drupal theming innovation, and particularly for the awesome body/node/block/node classes code and the block edit/configure links.
• Stephanie and Chris from TopNotchThemes for thinking up some awesome theme settings
• Al Steffen from Studio theme, for pushing the limits at turning a Drupal theme into a nice organized collection of files.
• Jacine Rodriguez from Sky theme, for laying the groundwork for Typographical theme settings, and more cool code.
• All the rest of the Drupal community for working together on a free software project!

Features:

• Color module integration (CSS only)
• Live-preview mode for tuning colors. Any action by the color picker is immediately visible on the layout
• Complete layout control! Supports flexible width, fixed width, percentage based columns and blocks, and it all works in internet explorer too!
• Layout automatically adapts to no-sidebar one sidebar or 2 sidebar pages (retaining the set sidebar width and resizing the content column)
• CSS file caching for enforcement of the theme settings.
• Dynamic regions (horizontally) scale any number of blocks to fit next to each other
• Full typography control with Cufon engine for selecting/adding custom fonts
• Comes with 18 free fonts!
• Animated dropdown menus with jQuery Superfish integration
• Dropdown menu is configurable through the theme settings form
• Various jQuery scripts to help make your website look sharp
• Nodetype specific theme settings for node links and taxonomy links (adapted from acquia_marina)
• Well organized and valid CSS 2 stylesheet, just approx. 1.000 lines.
• Accessible and semantic HTML code. (and Search Engine friendly, of course)

Download it on the Drupal.org project page: http://drupal.org/project/sooper_basetheme

Rationale:

This theme is the result of the work I've been doing, developing my drupal themes product line for sooperthemes.com, and it also includes many functions and classes that I have needed in the past 3 years, working as a freelance Drupal themer. I think the coolest part of the theme is the advancements I've made in recoloring themes, though this theme only uses the most basic parts of the color module, I've included some functions in the color/color-utility-functions.inc file that I currently use for my premium themes. It would be really cool if we could get a Color API in Drupal 7 to replace the color module, so that all the Color enthusiasts can collaborate to replace the old color.module.

The Cufon engine is also really cool, it's my first attempt to integrate Cufon with a Drupal theme. It was actually really easy, because you can just call upon Cufon with jQuery selectors. Cufon is a new competitor for sIFR, that uses VML and Canvas to replace browser text with embedded-font text.

The dynamic regions part is a simple solution to a complex problem, having a region that needs to have different CSS for every page that has a different number of blocks in this region. Basically it's just this:

// Widths of blocks in Dynamic regions
$precount = substr_count($vars['preblocks'], 'class="block ');
$postcount = substr_count($vars['postblocks'], 'class="block ');
$vars['postcount'] = $postcount;
$vars['precount'] = $precount;
if ($precount > 0) {
$prewidth = round(100/$precount,3);
}
if ($postcount > 0) {
$postwidth = round(100/$postcount,3);
}
$vars['blockwidths'] = <<

But then when you check it out in Internet Explorer you will find your blocks collapsing and stacking on top of eachother, but there is a very cool fix for this, a virtual buffer:

div.sooperblocks {
margin-right:-100px!important; /* Create an invisible space (buffer) to allow overflow without collapsing */
padding-right:100px!important;
}

I will explain further in another blog post!