Hi Mathias,
Thanks for looking over the code and taking the time to work further
on it. First to respond to your points:
1. I'm not sure of what the down side of not removing the inline
opacity is. Also, doing an "out" animation does not seem to remove
the opacity anyway (look at it in Firebug and the style attribute
still reads "opacity:.9999; display:none;" on a Mac). The original
code is a) less, and b) works across browsers (except for a flicker
in Opera on mouseover).
2. I changed the "find" to "children". I could not reproduce any
problem whereby having an li with no ul opens the first ul of the
first li with a ul, but as find and children seem to work the same
with my tests, I've changed it to children incase I have missed your
point.
Unfortunately your other changes broke the keyboard access and the
timed delay no longer worked. I didn't look too deeply into why this
was so. Any ideas?
Thanks for your interest Mathias!
Joel.
On 13/03/2007, at 7:22 AM, Mathias Bank wrote:
> Hi,
>
> I have some improvements for your script:
>
> 1. You add opacity to the ul. This opacity should be removed at
> mouseout.
> 2. Instead of using find('ul'), you shoul use children('ul'). If you
> have a li with no ul, your version will open the ul of the first li
> with ul.
>
> Here is the improved code:
>
> // enhanced suckerfish-style menu plugin by Joel Birch, edited by
> Mathias Bank
>
> (function($){
> $.fn.superfish = function(o){
> var defaults = {
> hoverClass : "sfhover",
> delay : 500,
> animation : {"opacity":"show"},
> downAnimation: {"opacity":"hide"},
> speed : "normal",
> downSpeed : "fast"
> };
> var over = function(){
> var $$ = $(this);
> clearTimeout(this.sfTimer);
> if (!$$.is("."+o.hoverClass)) {
> $$.addClass(o.hoverClass)
> .children("ul").animate(o.animation,o.speed)
> .end()
> .siblings().removeClass(o.hoverClass);
> }
> };
> var out = function(){
> var $$ = $(this);
> this.sfTimer=setTimeout(function(){$$.removeClass(o.hoverClass)
>
> .children("ul")
>
> .animate(o.downAnimation,o.downSpeed)
> .end();
> },
> 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);
>
> Mathias
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
