Suckerfish & jQuery
Jul 28, 08:31 PM by Alicia Ramirez | Technorati Tags: jquery,suckerfish,menu,dropdown,drop down,nav | Category: Scripting
I love Suckerfish Dropdowns! They are CSS based and list based.
I love jQuery! It’s small and you can do a lot with very little coding.
I know it’s not a novel idea, but I wondered how hard it would be to use jQuery to spice up Suckerfish menus. Pretty easy, as it turns out.
To be able to understand this tutorial you need to be familiar with both jQuery and the Suckerfish menus. I’ll explain how to merge them, not how each works in detail.
The way Suckerfish does the hiding and showing, is by moving the nested lists (sbumenus) to the left, out of the screen, and putting them back in place when you hover over the parent list item. During my first attempt, I realized that behaviour needs to be removed, or it would conflict with the jquery effect, causing flickering. I added the following css class to override it:
#nav .jqhide {left: auto; display: none;}
And then used jQuery to attach it to my list:
$("#nav li ul").addClass("jqhide");
Once that was done, I needed to add the functionality again, but with a little slide-down/slide-up effect:
$("#nav li").hover(
function(){
$(this).children("ul").slideDown();
},
function(){
$(this).children("ul").slideUp();
});
And that’s it. You can see a simple demo here.
The original javascript that was used for IE6 is no longer necessary, since the jquery code will work for it (I also removed the #nav li.sfhover ul selector that went with it). And people that have JavaScript disabled will fall back to the original effect-free Suckerfish behaviour.
I tested it successfully in FF 3, Safari 3, IE 7, and IE6.