[jQuery] enhanced suckerfish-style menu plugin

[Joel Birch]

Hi jQuerolians,

I'd like to offer up my new "superfish" plugin for feedback.  
Basically, it takes an existing pure CSS dropdown menu and adds the  
following features:
- suckerfish-style hover support for IE6. The class added is  
'sfHover' by default but can be changed via the options object.
- timed delay on mouseout to be more forgiving of mouse-piloting  
errors. Default is 400 milliseconds but can be changed via the  
options object.
- animation of sub-menu reveal. uses a fadeIn by default but can be  
given a custom object to be used in the first argument of the animate  
function. The animation speed is also customisable but is set to  
"normal" by default.
- keyboard accessibility. Tab through the links and the relevant sub- 
menus are revealed and hidden as needed.

Example:
This plugin is now used on my Blush Tomatoes site although only two  
of the main menu items have dropdowns.
http://www.blushtomatoes.com.au/about/

To use:
1. begin with a pure CSS dropdown menu - it will degrade nicely to  
this when JavaScript is unavailable,

2. add the extra selectors needed for IE as per the suckerfish  
technique, eg. #nav li.sfHover in addition to the regular #nav li:hover

3. call the plugin on a containing div or the actual top-level ul  
element, eg. $("#nav").superfish();

4. optionally, pass in an options object to override default  
settings, eg.
$("#nav").superfish({
        hoverClass : "over",
        delay : 500,
        animation : {"opacity":"show","height":"show"},
        speed : "fast"
        });

Here is the code:
---------------------------------------------

(function($){
$.fn.superfish = function(o){
        var defaults = {
                hoverClass      : "sfHover",
                delay           : 400,
                animation       : {"opacity":"show"},
                speed           : "normal"
        };
        var over = function(){
                var $$ = $(this);
                clearTimeout(this.sfTimer);
                if (!$$.is("."+o.hoverClass)) {
                        $$.addClass(o.hoverClass)
                                .find("ul").animate(o.animation,o.speed)
                                        .end()
                                .siblings().removeClass(o.hoverClass);
                }
        };
        var out = function(){
                var $$ = $(this);
                this.sfTimer=setTimeout(function(){$$.removeClass 
(o.hoverClass);},o.delay);
        };      
        o = $.extend(defaults, o || {});
        $("li[ul]",this)
                .hover(over,out)
                .find("a")
                        .focus(function(){ 
$(this).parents("li[ul]").each(over); })
                        .blur(function(){ $(this).parents("li[ul]").each(out); 
});

        return this;
};
})(jQuery);

Tested on:
Mac FF2, IE6, IE7, Safari2.
Opera9 has flicker and seems to not support keyboard access (?)
Not tested with three levels of menu but may work.

All feedback is greatly appreciated.
Joel Birch.

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/