CSS Drop-Down Menus - "Best"? Most feature-rich?

Question

I'm in the unfortunate position of having to implement a drop-down cascading menu on a site I'm building. I'm looking for a Suckerfish-style solution that is primarily CSS-based and works on a simple set of nested ULs and LIs.

Son of Suckerfish seems like the way to go, but I don't like the way it just disappears the second you move the mouse away, as users with co-ordination difficulties will have a nightmare navigating the site (or just not bother, but since it's a corporate site there are some who will probably have to use whatever I implement).

Neat features that I've not even thought about needing are welcome, but the two main elements I'm looking for are:

1. Multi-level using a nested UL/LI structure
2. Small (possibly configurable?) delay before disappearing when the menu is "mouseout"-ed, even if it is provided by some extra JavaScript.

Answer 1

You could use jQuery. Here is an example: http://www.jqueryplugins.com/plugins/view/61/

Answer 2

You won't be able to get a pure CSS drop down menu with the functionality you require. You'll have to use some kind of Javascript. Either a library like JQuery that has been mentioned or by modifying the Suckerfish code to use onclick instead of onmouseover/out.

But by going an all Javascript route you could be making it easier for one group of people ("users with co-ordination difficulties") but making it difficult for others (anyone with Javascript turned off for some reason).

You may want to look into adding some alternatives - mouse controlled hover menu for those comfortable with the mouse; keyboard based control via access keys and the like for others.

Answer 3

I can't see a way to add delay outside of JavaScript - but if you're going to use JavaScript you may as well use a JavaScript controlled menu.

If you follow a semantically-correct nav pattern and set it up so it display's normally (e.g. static) when JavaScript is not present you should be fine with whatever you use.

It's all about your target audience - who's larger? JS-disabled or users with co-ordination difficulties? I would guess that the latter require the priority (if not for percentage use then disability laws).

Answer 4

I am using the solution implemented on Steve Gibson's site grc.com. It does everything I need, and uses no javascript. The delay thing you are looking for isn't there however, so you will probably need to add some Javascript for that.

Answer 5

As Lee Theobald said, drop/down need Javascript, and Jquery is a great choice. But in the side of accesibility, take a look at "Listamatic" a great list of menus and special this nested.

Answer 6

Which method did you end up using?

Answer 7

I would strongly suggest that you use superfish, the jQuery adaptation of the suckerfish menu. It has loads of features (and delay is one of them), adds some fancy animation capabilities, and degrades to the normal suckerfish menu gracefully. It also doesn't need any extra markup.

Answer 8

Part of the coordination problem can stem from bad design. Make sure you have fairly large buttons with, if possible, overlap on all sides. Ideally a top nav button would have a drop down menu appearing centered below it (instead of left aligned). Sub-menus of the drop-down would follow a similar pattern. I've found having this level of error padding accommodates uncoordinated users, and saves you the trouble of programming in javascript.

Every site is different of course, so I present this more as an alternative 'what-if' solution.

Answer 9

My first recomendation echos one already made - Steve Gibson's CSS Menu. It uses no JavaScript, is about as cross-platform compliant as you're going to get, and is relatively simple to implement.

If that doesn't work, my JS-based reccomendation goes to mygosuMenu. I've been using it for quite some time on all my projects prior to finding Steve's menu. Its highly configurable; and style, structure, and the menu code are all seperate. Its a basic HTML Table you can style via CSS to your heart's content.

I've still got two sites using the latter:

• Christian Rock group Jesus Joshua 24:15 (be kind on the traffic, the guys are still on shared hosting...)
• Eastover Fire Department

Answer 10

Thanks for the useful menu sample.