I’ve been using this dropdown menu method for a few years now. It seems some clients and marketing departments love complicated dropdown navigation systems and as much as you try to dissuade and convince them that a more simplified navigation scheme would actually help their customers get to the information they want faster, they still insist on using these types of menus.
There have been many ways to do this over the years but when Patrick Griffiths and Dan Webb introduced this method on the ALA site in 2003 and then updated the technique on their HTML Dog site a few months later, it has become the best method I’ve found of creating dropdown navigation. The Suckerfish method uses CSS and HTML lists for the navigation links. A small bit of JavaScript is used to mimic the :hover pseudo class on list items for the Internet Explorer browser.
The sample page I have linked is designed to show some possible implementation methods. The styles and JavaScript are documented and commented so that modifying for your own use is a little easier (and there for me the next time I use it!). Patrick and Dan’s examples were great and showed you how to get these rolling; you were on your own as far as styling for a real world application. The forum on the HTML Dog site was always full of questions about how to do particular styling tricks and each time I went to use the menu system it became a learning experience trying to sort out what CSS rule style would control what part of the navigation.
On my example page you’ll find two menus. One uses background images and various color techniques as well as a second level of dropdowns. The second menu is simpler and is there to show that you can in fact have more than one menu on the same page with a different set of styles. I had to modify the JavaScript to get two menus on one page working and I’m not sure if it’s the best way to do it but it seems to work OK. To make things simpler here, I’ve included the CSS and JavaScript right there in the HTML page (view the source). In a real world scenario, you need to do the right thing and use separate files for your CSS and JavaScript and link them in the head of your document. The CSS involves a star hack in two spots so it won’t validate completely. If that bothers you too much then these menus aren’t for you.
I’ve tested on my Windows XP system and find these menus work in the following browsers:
Firefox 1.5.0.4
IE 6 SP2
IE 5.5
IE 5
IE 7 Beta
Opera 8.5
Netscape 7.2
Netscape 8
These menus don’t work on Netscape 4.7 or IE 5 on the Mac but those browsers are essentially dead anyway. I haven’t tested on Mac or Linux systems as I don’t have access to those – any user tests would be appreciated so post your results to the comments please.
If you read all the comments on the HTML Dog forum, you’ll see reference to adding in keyboard control. A few folks have tried it and this method by Matthew Carroll seems to be one that works (with caveats).
July 26th, 2006 at 7:06 pm
At last!!! A simple aproach to menus! This is a lifesaver, thank you!
August 1st, 2006 at 9:03 am
why not just use the .htc rollover behaviour and make sure that it is only IE that gets the javascript behaviour
* Peterned - http://www.xs4all.nl/~peterned/
October 12th, 2006 at 2:35 pm
It seems to me like this method handles covering some form elements but when I tried it out w/ a select box the select box comes out on top. Any thoughts on that other than the usual javascript iframe hacks?
October 12th, 2006 at 2:57 pm
James - I just tried adding a selection dropdown to the demo page (offline version on my computer) right under the main menu. The suckerfish dropdown worked as expected and covered the form element.
Is there a page example you can point to showing the issue you’re having?
October 26th, 2006 at 11:49 am
Dean,
If you use a selectbox, the menu goes underneath it.
Let me know when you’ve found a solution!
January 18th, 2007 at 9:47 am
Yup, the menu doesnt work well with the select elements. (only IE6) I have applied a fix which sets all the select elements to hidden but it will be a problem if there are more than 1 select elements on the page.
I have posted about this on sitepoint forums, let’s see if someone can help me to fix it or not.
Deep
November 13th, 2007 at 8:01 am
Very excellent example of the well known suckerfish menu! I use it quite often and like much.
February 15th, 2008 at 1:25 am
Can someone help me figure out why my drop downs aren’t working in IE?
Please excuse if the code looks sloppy. I’m not the best at this!
http://kittentaboo.com/forestfoundation.html
February 15th, 2008 at 12:08 pm
Sorry, accidentally deleted the original file.
http://www.kittentaboo.com/forest.html
June 30th, 2008 at 5:25 am
i used this code, but it doesn’t work in IE. I still get flicker while mouseover on sub-menu.
please help.