It looks great - the only thing I would add is that the plugin roll up the menu when you mouse over a menu item that doesn't have a dropdown attached. On your site for example moving from "consumer info" to "glasshouse" works smoothly, but the menu doesn't disappear for a few seconds if you move from "glasshouse" to "city of gurya" (in ff2)
Otherwise fantastic - very nice site. thumblewend wrote: > > 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/ > > -- View this message in context: http://www.nabble.com/enhanced-suckerfish-style-menu-plugin-tf3374021.html#a9461765 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
