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).
At last!!! A simple aproach to menus! This is a lifesaver, thank you!
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/
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?
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?
Dean,
If you use a selectbox, the menu goes underneath it.
Let me know when you’ve found a solution!
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
Very excellent example of the well known suckerfish menu! I use it quite often and like much.
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
Sorry, accidentally deleted the original file.
http://www.kittentaboo.com/forest.html
i used this code, but it doesn’t work in IE. I still get flicker while mouseover on sub-menu.
please help.
I just wanted to know if I could use this code for a website that I am developing? Is there any recognition that needs to be posted with the code? It works great in my development phase!!
Go ahead and good luck!
When I deployed the dropdown menu in Wordpress, the dropdown menu background color did not show up. I went into the css code and removed the .under from ul.under and it worked. I was wondering what the ul.under stands for?