The Higher Things website uses a really cool jQuery plugin called Superfish for it's black navigational bar. I first stumbled across this plugin while dealing with an animation problem for a home-grown implementation when we were redesigning the site. Rather then re-invent the wheel I decided to just use Superfish. One of the things that I was never really keen on was the lack of an animation to close the menu when, it just disappears as opposed to when it appears it slides in to view.
As a result I've modified superfish for HT's website and thought I would share the hack here for anyone else interesting in getting superfish to animate when a menu item closes.
First, we need to change some options around, we're going to remove the "defaults" for "animation" and replace it with the following (this should be at line 20):
animationOpen : {opacity:'show'}, animationClose : {opacity:'hide'},
Second, around line 78 we need to change how the method responsible for hiding a superfish menu functions, replace the "hideSuperfishUl" and "showSuperfishUl" method with this one:
hideSuperfishUl : function(){ var o = $.fn.superfish.op, $ul = $('li.'+o.hoverClass,this).add(this); $ul.find('>ul').animate(o.animationClose, o.speed, function() { $(this).css('visibility','hidden'); $ul.removeClass(o.hoverClass); o.onBeforeShow.call($ul); }); return this; }, showSuperfishUl : function(){ var o = $.fn.superfish.op, $ul = this.addClass(o.hoverClass) .find('>ul:hidden').css('visibility','visible'); o.onBeforeShow.call($ul); $ul.animate(o.animationOpen,o.speed,function(){ o.onShow.call(this); }); return this; }
That's it! I set the above defaults following the release to use opacity for animating, however on HT's we use { height: 'show' } and { height: 'hide' } respectively for the animations. You'll note in the hide method we added an animation and then after that animation has finished executing, in a call back we remove the hover class and call the closing callback. In the show method all we did was change the name of the animation property to be used, since we now have two.
Updated 10/27/2008: In recent versions of superfish, the namespace has moved to $.fn. Hence, I've adjusted the above code to use the new namespace for accessing the options object.
