[jQuery] enhanced suckerfish-style menu plugin
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/