Use superfish for menus

Thanks for pointing me to superfish. I didn't know of that yet.

Regarding your request to use superfish for admin_menu, IMHO that's not a good idea. Here's why:

1. Superfish is based on JavaScript. That's a needless extra layer/condition.
2. Sub-menus are opened much slower in superfish. The goal of Admin Menu is to provide fast access.
3. Superfish seems not to support all browsers yet.

I tend to mark this as won't fix. It sounds more a like another rendering option for the already proposed Menu Rendering API. Do you agree?

Hi folks,
I created the Superfish plugin and wanted to add my comments to this thread. Specifically, in response to Sun's three points:

1. Superfish is JavaScript but must be applied to a working CSS-only dropdown menu. Therefore it degrades perfectly in all browsers that support pure CSS dropdown menus. Admittedly, old versions of IE do not, but that has always been the case.
2. Sub-menus only “open slower” when you use the default animation setting. This is easily overridden via an options object that can be passed in as the first argument when calling the plugin. The speed of animation can be as fast as you want, or even instant, ie. no animation.
3. Superfish supports all browsers that jQuery supports. It is tried and tested in all modern browsers.

Superfish merely adds the script necessary to make IE hovers work, just as normal suckerfish does, and (while its at it) enhances the menus with optional animations, timed delays on mouseout (good for usability/accesibility) and keyboard access for browsers that support that.
If you wish to disable animations, simply override the 'speed' setting like this:

	$('.nav').superfish({speed:0});

It's really a very simple and unobtrusive plugin. If you have any questions I am more than happy to answer them.
I hope this provides you with a bit more information to base your decisions on.
Joel Birch

Thanks for the clarification, Joel.

Regarding 2): Although animation speed could be a user-configurable setting for Admin Menu, I don't understand the benefits we'd have by using SuperFish instead of SuckerFish if the default animation was disabled. Doesn't SuperFish act like ordinary SuckerFish DropDowns if there is no animation?

And just to get another opinion - Joel, a) are you using Admin Menu and b) voting for using SuperFish?

I consider the animations the sugar on top for those who like that stuff (clients especially). The more useful benefits are to do with the improved accessibilty and usability of two of its other features:

1. Keyboard access to all links, including the links nested within the submenus. You can move forward (tab key) and backward (shift-tab) through the menu links in the order that they appear in the source, and the submenus will open and close as needed to show the currently focussed link. This is important for people with motor skills impairments who can’t use a mouse, and a handy option for everyone else.
2. Timed delay on mouseout. Pure CSS dropdowns and basic suckerfish implementations, are very unforgiving of mouse guiding errors. If the user leaves the hover area even slightly the dropdown menu snaps shut instantly which can be particularly infuriating for multi-level menus. Superfish allows the user to mouseout and the menus stay open for a (configurable) amount of time – half a second by default – allowing the user to correct their mistake and have the submenus remain open. In practice, this makes using the menu much easier and allows faster mouse movements as you don’t have to be constantly worrying about perfect accuracy. It also helps people who can use a mouse but have impaired reflexes for whatever reason.

I guess another reason to use Superfish over Suckerfish might be… why not if you already have jQuery included? Superfish is quite a light-weight plugin, and it basically is Suckerfish, except with added usability benefits.
To answer your other questions:

• a) I am not using Admin Menu as I haven't used Drupal yet but am keeping an eye on it for when I do take the plunge. The fact that you guys use jQuery is enough of an endorsement for me to feel like you know your stuff ;)
• b) I don’t know enough about the project enough to say that Superfish is the way to go. Dropdown menus do have certain drawbacks – mainly to do with accessibility – so I just wanted to show you how Superfish attempts to address some of these issues and also degrades gracefully as per regular Suckerfish. Superfish is my attempt to create a solution that keeps my conscience as clean as possible when clients demand dropdown menus, and also please them with some animation eye-candy (which they invariably love).

I hope this info is helpful.
Joel.

Timed delay on mouseout.

+1 for this feature alone. IMO a true usability improvement.
--
Stefan Kudwien
unleashed mind

+1 Timed delay on mouseout would be great.

ok, it was quite easy to add superfish to admin_menu and the animations seem to work. However, although defined, the mouseout delay is not applied.

Drupal 5.x ships with jQuery 1.0.4. Even after upgrading to jQuery 1.1.2 there was no mouseout delay. Any other superfish (legacy) functions seemed to work fine with both versions.

Upgraded to current jQuery 1.2.1 then. Still no luck - whether using superfish oder legacy superfish.

To implement superfish, in admin_menu_menu() I added

  drupal_add_js($path .'/superfish.js');
  drupal_add_js($path .'/admin_menu.js');

and replaced admin_menu.js with the following code:

$(document).ready(function(){
  $('#admin_menu>ul').superfish({
    hoverClass : 'sfHover',
    delay      : 16000
    animation  : {opacity: 'show', height: 'show'},
    speed      : 200
  });
});

Sorry, typo in the javascript code of last post:

$(document).ready(function(){
  $('#admin_menu>ul').superfish({
    hoverClass : 'sfHover',
    delay      : 16000,
    animation  : {opacity: 'show', height: 'show'},
    speed      : 200
  });
});

Bummer. The delayed mouseout is a HUGE usability improvement.

Perhaps we can get Superfish in for the D6 version with the latest/greatest JQuery.

In the meantime, I wonder if there's a quick way to implement the mouseout delay without Superfish.

I've created a patch to add the delayed menu functionality similar to Superfish. It works with the D5 versions of JQuery and you can find the issue here.

Mouseout delay has been added through http://drupal.org/node/204935
As long as nobody steps up with a strong opinion, I don't think we need fancy animations or other features of superfish in admin_menu. Thus, I'm marking this issue as duplicate.

Feel free to re-open it.

Admin menu is great, but I really think it would be better using superfish. Not only are there some extra fancy options, but more importantly it can use the jQuery hoverIntent which to me is as great a ui improvement. I have adminmenu at the top of the page, and I'm constantly moving over it to get too and from the browser menus. Every time I move over it, adminmenu blasts up. HoverIntent fixes this problem.

See #220100: Add support to detect hover intent (no dependencies added)

Oh - fantastic news! Not sure why I didn't spot that - thanks.

Could someone please explain me how to get superfish implemented in the left navigation block... its driving me crazy.

I'm willing to record a tutorial of how to integrate Superfish menus into a Drupal template. Leave a comment if interested.

Ya please............ that would be a big help poka_dan.

I would love to see how this is easiest done. It would probably be nice to have that as a module

Hi, i am a newbie in drupal and web building, but it's such a good CMS.
My question is where i can found

$('.nav').superfish({speed:0});

Thanks for any respon :)

hello

i am using the super-fish menu and work very well with me
but when i load and enter my website i think it take some time when it's loaded first then the website load it take time i don't know why can you pleas suggest me !!