SooperThemes Blog

Where we talk about Drupal, front-end development, open source software and other cool topics

You are here

Presenting SooperFish: jQuery plugin for Multi-Column Dropdown Menus

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.

Comments

Yes, we're interested in a Drupal integration write-up! (Me and the mouse in my pocket. And the majority of your readership, prolly.)

Great work, I love the subtle bounce animation.

Ok I'll put it on my todo list. But be prepared to get your hands dirty because it takes some work to control so many settings!

This is very cool, specially the animation variants.

Are you planning on including this on the potentially up-and-coming Sooper basetheme?

instead of a new sooper basetheme I'm first going to do a way more awesome open source project called Politika and it's also a theme. Keep your eye on your RSS ;)

I liked the get back to work message.

I noticed on the silver theme, the fly submenus hide the arrow.

How does Sooperfish prevent menus from opening up off screen?

I doesnt. Do you know of any scripts that do this? Then I can take this as a nice feature request and perhaps implement it :)

Supposition for Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/supposition-test/

With Superfish just include supposition.js and then after superfish settings add .supposition(); see below for example

$("#primary-menu ul.sf-menu").superfish({
hoverClass: 'sfHover',
pathClass: 'active',
delay: 300,
animation: {opacity:'show',height:'show', width:'show'},
speed: 'fast',
autoArrows: true,
dropShadows: false,
disableHI: true
}).supposition();
};

When I try this with Sooperfish it doesn't seem to work, although I haven't tried the

onInit: $.supposition.onInit,
onBeforeShow : $.supposition.onBeforeShow,
onHide : $.supposition.onHide

with Sooperfish callbacks

I posted a few issues in your jquery Sooperfish issue que.

Hopefully that helps, maybe you can get Supposition to work with Sooperfish. If so, I would switch to Sooperfish.

Thanks

Hey, always nice to see people moving these ideas forwards, great work!

Quick correction: contrary to what is stated above, Superfish does *not* use hoverIntent for the mouseout delay. That is done via setTimeout. HoverIntent is only recommended as an optional enhancement to provide a delay on mouseover. This could benefit your menu in the same way. It stops submenus flying open while the cursor is merely in transit over the menu on its way to something else.

Hi Joel, cool that you found your way to my site! I'm glad you like my work!

Thanks for clearing that up about hoverIntent, I'll see if I can use it but I would rather see a solution that uses less code to delay something.

While the demo works perfectly with multi-column menus- the download file seems to have a strange behavior that loads a multi-column list vertically and then pops into columns. Any idea what's going on here?

Do you mean the demos in the download don't work properly? Or did you find a problem when using it with your own menus?

The demos in the download don't seem to work properly, tried with Firefox and Safari. The multi column lists seem to jump from a single vertical list into the desired column view. The online demo above behaves differently in that the columns are always there. Thanks!

Also, noticing that when creating a multi column menu- the list organizes horizontally rather than vertically- is it possible to correct this? For example:

Menu Format
A B
C D

Desired Format
A C
B D

Otherwise it's impossible (or just illogical) to create ordered menus. Great work, I really hope I can get this rolling in my new site!

Hi, as far as I know this is not possible with CSS2.
There is a multicolumn feature in CSS3 that would enable us to do this but it's not supported by all browsers yet: http://www.koodoz.com.au/klog/web-design-html-xhtml-css-cascading-style-...

So it's something for the future.

oh and I guess you could do it by splitting the menu into 2 or more menus in php. That shouldn't be too hard but it's not my field of expertise.

Wondering if there is already a way to easily do a vertical version. For instance with superfish there is a stylesheet for that and you put in an sf-vertical class I think.

Also is there any support for what superfish calls a navbar? (sub items go straight across) or moving dropdowns to a different side, for instance on a right nav you might want the subs to go left, or on a footer you might want subs that go up instead of down?

All in all, great job, I like the ease of setting up different animation for open and close.

Hi,

the featured you named are not in SooperFish at the moment. Maybe if I design a theme that needs this kind of menus I will add it. The only use for a vertical version I can think of is in an e-commerce site with lots of categories, but I don't plan on doing e-commerce sites soon. Maybe when Drupal Commerce goes stable.

Controlling the direction of the subs is something I want to work on, I will blog it when I get to implement this functionality.

thanks for your input!

Hi, Me again.
I got vertical working by just adding a few lines to the end of a theme file. You can leave the core css alone. Basically after adding sf-vertical to the html like this:

I also tried creating what superfish calls a "navbar" with a horizontal first level sub. The challenge is getting the horizontal sub flush left.

I actually don't think it's possible without an update to the jquery function.
the left:auto on line 63 of jquery.sooperfish.js overrides any css changes that would make it possible:

$('ul',this).css({left: 'auto',

If it were modified to not do that when the .sf-navbar class is present, then it could work.

sooperfish is set ul and li to display block by default. but if my webpage takes some time or have some javasctipt function alert then its show all menu in open condition.
How could i set to display = none and set then to block in ready function.

I actually don't think it's possible without an update to the jquery function.
the left:auto on line 63 of jquery.sooperfish.js overrides any css changes that would make it possible:

$('ul',this).css({left: 'auto',

If it were modified to not do that when the .sf-navbar class is present, then it could work.

Looks like a great tool. Seems like the big brother to Superfish. I a new to Drupal and coding in general. How can I integrate this in my Drupal Site?

Hi, thank you for sharing such an amazing JS plugins.

I've tried to download from the link above or link at jquery site it doesn't work. Could you please fix that or provide an alternative link for download please?

Thank you

Done, it's on github now, see top of article.

Thank you for fixing the link and sharing again

Happy New year :-)

Where can I change the color and such of the menu rectangles?
I've tried the TouchPro theme (and just ordered the Respondr theme)
In TouchPro I could change most stuff, but the menu stays dark grey....

(I'm a theming strarter... you can tell can't you)

Add new comment