If you’ve ever done the “dropdown dance” while developing your websites and avoided clunky code while still attempting to be standards compliant, accessible and semantic — then you know about the Suckerfish menus made popular on A List Apart. That article was published on November 7th, 2003, so that means we will be celebrating the sixth year anniversary of our favorite friendly neighborhood dropdown.

The History

Patrick Griffiths and Dan Webb are credited with coming up with a simple CSS and javascript-based dropdown menu that was originally published on ALA. With the influence of ALA over the years, the popularity of the Suckerfish menu technique has grown in popularity and the basic concept of their technique — using the pseudo :hover class as the trigger — drives many a dropdown across the interwebz.

With the now outdated IE6 slowly being taken out to pasture, modern browsers are even more optimized to use Suckerfish-style menus. IE6 for those of you who forgot — did not support the pseudo :hover class and that’s why the simple javascript is necessary at all. It triggers the dropdown action for that browser. While most of us still try to support IE6, it’s no longer a top-priority as it once was.

Patrick Griffiths and Dan Webb have updated this landmark menu technique since the original and called it the “Son of Suckerfish Dropdowns” on their now defunct HTML Dog website. They’ve expanded the functionality to include multiple levels and reduce the javascript as well as other compatibility enhancements.

Visit Patrick Griffiths and Dan Webb’s “Son of Suckerfish Dropdowns” @ HTML Dog.

See an example from HTML Dog.

Why Suckerfish Dropdowns?

It’s Lightweight and Easy To Use
Using this technique requires using three web languages. HTML, CSS and Javascript. The HTML and CSS portions are already necessary if you plan to have a menu of any kind and the javascript is there for IE6 and even then it’s just few lines of code supplied to you that you don’t have to edit. For those of you who have searched around for dropdown menus, you’ll know it’s really tough to find a simple solution that works on a standards compliant browser AND the IE6s of the world. There is always a caveat… intense javascript based on conditions, tables, intense CSS and etc.

It’s Standards Compliant & Accessible
The dropdown menu structure is marked up as a regular ol’ HTML list. It’s styled by CSS. The javascript can be used in conjunction with the CDATA tag and hence be seen as character data and pass validation.

It’s Popular and Well Supported by the Community
Every implementation of the technique will be unique and without a doubt — you’ll have a bug. The great thing about Suckerfish dropdowns is that it’s now pretty mature and well adopted by the community. Issues have been documented and supported and many work-arounds and fixes are already available online a google search away.

I had the common Suckerfish :focus problem where parts of the menu would remain visible or “sticky” depending on how the :focus was triggered on IE7. I looked around and found a simple fix here and voila, problem solved!

So although you may not have the same problem, you can be sure you’ll probably have better luck finding help for Suckerfish dropdowns over the other techniques.

It’s Versatile
I’ve been using it as a vertical menu for the most part but it works the same way with some tweaks as a horizontal menu as well.

Also, why does it have to be a menu? Use the basic concept to hide and then open up a content box using the :hover class to trigger it. For instance, a Trivia Question box and they roll over a button to display the answer. The possibilities are endless!

Six More Years of Suckerfish?
With the new features in CSS3 and HTML 5, I can’t wait to see what type of new progressive enhancement we’ll be seeing in years to come. Rounded corners, transparency, border-types, embedded media… all being used in imaginative ways with the basic Suckerfish techniques is a wonderful thing.

In the future when IE6 is nothing but a bad nightmare buried deep in our past, we won’t need the javascript portion of the technique making it even more easy to develop for. I prefer to use Suckerfish based menu techniques in general because of the reasons outlined above and I hope you consider in making your choice next time you do the dropdown dance!

Did I Miss Anything? Correct me or add to the conversation in the comments!

This entry was posted on Sunday, October 18th, 2009 at 10:18 pm and is filed under Best of Industry, CSS, Tips, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.