Dropdown Menus

After trolling through what seems like hundreds of examples and tutorials, I finally found a pretty simple method of applying a dropdown menu. Basically, what I was after was when the mouse hovered over a link from a horizontal menu, a dropdown vertical menu appears. If not for an IE bug, you can pertty much accomplish this with just purely CSS.  A little bit of javascript is required. There’s some pretty complex examples out there, but this article, Suckerfish Dropdowns, from A List Apart is by bar the simplest in my opinion. It still uses javascript, and although I don’t quite fully understand what it’s doing (specially the javascript bit) it was pretty easy to apply for my own purposes.

Here’s my sample. Pretty simple, but it works!

2 Comments to “Dropdown Menus”

  1. hey Sarah,

    Yep – Suckerfish has been around for a few years and has pretty much cornered the market on dropdowns, the fact it only has about 10-12 lines of javascript, and otherwise is just in a logical tree of unordered lists, makes it very easy to install and use.

    Probably the only weakness of these rollovers is that there’s no timeout – ie. once your mouse hovers off the options, it disappears instantly, which can be jarring from a usability point of view. A few extra lines of .js would be a fair price to pay to resolve this I reckon, but have yet to see it.

    Cheers, Ian.

  2. Hi Sarah,

    I have also used suckerfish dropdowns in the past and they work really well. I have kinda steered clear of drop-down navigation lately though. I feel that often a user would prefer to make 2 clicks than a “hover, keep the mouse within the menu, scroll down, click”. But i agree that sometimes when you have so many options available and you need to conserve screen space that drop-down menus are often the best approach.

    Thanks,

    Alistair.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.