CSS Drop-Down Menus - “Best”? Most feature-rich?

By : tags2k
Source: Stackoverflow.com
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.
By : tags2k


Answers

You could use jQuery. Here is an example: http://www.jqueryplugins.com/plugin/47/



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:

By : AnonJr


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.



This video can help you solving your question :)
By: admin