Oct 23rd by Andrew Houle | stashed in Inspiration
In one of my recent web projects I was asked to include dropdown style navigation to the site. I found it quite exhausting just how many articles, techniques and services are out there are on topic. However, what I didn’t find was a compilation of some really slick examples. And, while I’m not always the biggest advocate on using this sort of navigation, I must admit sometimes if can be done quite well. Here are some examples of sites that I think did a great job with it…
Adobe
Slate
Tennessee Theatre
Mozilla
Mayflower Brewing
Project Vino
Bird Malaysia
Limelight Networks
Fall for Tennessee
Galaciofolia
August
GoMediaZine
Helmy Bern
ElectriCurrent
Navigant ConsultingFurther reading on dropdown menus
- Drop-Down Menus Horizontal Style
- Suckerfish Dropdowns
- Sons of Suckerfish Dropdowns
- CSS Horizontal Navigation List
- Multi-Level Dropdown Navigation Menus: Examples and Tutorials
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
Contribute
liam
October 24, 2008
Brilliant collection, really top quality examples. Nice one
liam´s last post was… Tutorial: Creating Custom Write Panels in WordPress
Dean Houle
October 24, 2008
Just about every Large Corporate website incorporates dropdown navigation. To me, as a user only, I like the format. What is the downside?
Barry Melton
October 24, 2008
You left out EMC. It’s not plain jane CSS, for sure, but I was struck by how elegant and perfect their drop downs the first time I saw them.
Angie Bowen
October 24, 2008
You’ve shown some awesome examples here. I love Helmy Bern & Navigant Consulting
Angie Bowen´s last post was… MyGuestBlog!
Andrew Houle
October 24, 2008
The main downside is usability. Especially for dropdown menus that use javascript or flash to achieve the effect. Javascript can be easily turned off, and flash relies on a plugin. If users don’t have these, then the menu can be rendered useless. For those reasons I prefer purely css dropdowns.
Kevin
October 24, 2008
Andrew, you bring up a good point, but what about older version of IE? At my office we use css dropdowns that will function on all the modern browsers and include some javascript for IE 6. We also usually include a sub navigation on the page too that is not part of the dropdown.
These are some nice examples though – I’m going to have to look at these for some ideas for the next time I have to make some dropdown menus.
Kevin´s last post was… Out at the Sugar Mill
Dainis Graveris
October 25, 2008
Just great navigation examples, for me gomediazone navigation is the most appreciated! :)
Dainis Graveris´s last post was… 40 Really Stunning HDR Car Photos, Resources And Tutorials
Andrew Houle
October 25, 2008
@Kevin IE6 is always a problem! Yet somehow there is still a good chunk of users that have that browser, and until that gets really low, most designs have to accommodate for it. I like the idea of adding the dropdown links somewhere else, just in case they don’t function properly.
Naldz Graphics
October 25, 2008
i love gomediazine dropdown navigation the most:)nice post Andrew!!!
Ronald
Leigh Taylor
October 26, 2008
You should also consider msnbc.com drop down too
Great list anyway
Craig Farrall
October 27, 2008
A Very nice list here, I do love the drop down menu when you need a bit more menu items, I especially like the slate one, it is done very nicely.
Craig Farrall´s last post was… WordPress Coolest Blog Competition
jeeremie
October 29, 2008
It is a very nice site you have here.
You could have mentioned Technorati. I know not everyone likes that kind of drop down menu but this one renders very well. I think there’s a lot of code behind.
jeeremie´s last post was… Divelog.tv
Eric
October 31, 2008
Very cool. I’ll be using the post as a reference when I work up my next drop down.
Eric´s last post was… Welcome Readers
Double Din Navigation
December 25, 2009
I like Helmy Bern design, May be due to the graphics. But the blend of images and colours are excellent.