> 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)
Daemach, I think Joel did that on purpose, to allow for mousing errors. There is a 400 ms onmouseout delay (adjustable) whether mousing onto another menu item, or just anywhere out of the dropdown. -- Josh ----- Original Message ----- From: "Daemach" <[EMAIL PROTECTED]> To: <discuss@jquery.com> Sent: Tuesday, March 13, 2007 12:39 PM Subject: Re: [jQuery] enhanced suckerfish-style menu plugin > > 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/ _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
