CODEWITHSUNDEEP
cssnavigationsuckerfish
tags2k
tags2k

Reputation: 84325

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

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.

Upvotes: 15

Views: 2761

Answers (9)

Brainmaniac
Brainmaniac

Reputation: 2536

For anyone coming to this old thread now I would suggest looking in to various modifications of the bootstrap drop-down menu. For example this:

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Good luck

Upvotes: 0

Christian Hagelid
Christian Hagelid

Reputation: 8355

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

Upvotes: 3

AnonJr
AnonJr

Reputation: 2757

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:

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

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.

Upvotes: 1

Salty
Salty

Reputation: 6688

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.

Upvotes: 8

accreativos
accreativos

Reputation: 161

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.

Upvotes: 0

Graeme Perrow
Graeme Perrow

Reputation: 57238

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.

Upvotes: 1

Ross
Ross

Reputation: 46987

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).

Upvotes: 0

Lee Theobald
Lee Theobald

Reputation: 8577

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.

Upvotes: 1

Related Questions