jQuery Suckerfish Menu
I think we all have heard of or used Suckerfish CSS Menu’s before, written by Pattrick Griffiths and Dan Webb for A List Apart. If not, it’s a cool way to make drop down menu’s using standards based semantic HTML and CSS. Unfortunately, with IE still dominating the browser marketplace we still need a way to handle the hover state in IE. To do that we need a little bit of JavaScript to attach mouseover and mouseout events to HTML elements.
Myles Angell decided to rewrite Suckerfish’s JavaScript with jQuery. Myles uses jQuery’s Basic Effects to show and hide the submenus and jQuery’s BaseStyle Base module methods to highlight the current moused over menu item. Pretty slick.
Check out some of Myles other experiments with jQuery. For the jQuery beginner these are good examples to start out with. The treeview is another experiment that caught my eye.
Awesome! However, if I try to center it horizontally, the drop menus seem to go out of alignment. Has anyone found a way to center this menu?
Yeah, I think there is not other js lib/framework easier than jQuery for Web Standards/CSS designer/developer, it is so simple, clean and clear. For me, I don’t have any programming expierence before, but I can deal with lots things with jQuery! Many thanks to jQuery and its developers( only John? ).
And I hope version 1.0 can release soon, with the new documentations. :)
Cheers!
This menu support submenus like the original suckerfish?
i have read :). Yes superfish suport submenus ;)
Great work Myles. I’ve noticed that the active state on the first tier menu only remains active (when drop down is visible) when you use a background colour, however if you try to use a background-image, and try position it on active state (eg. backround-position: 0 -31px) it does not work. How can i alter the code to make this work?
Pingback: Does the Sukerfish suck? | 360aday.com
This doesn’t seem to work using a hosted version of jquery through Google. I have no idea why. It’s killing me.