written by: Andrew Houle  /  stashed in: Inspiration  /  10.23.08

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 VinoProject Vino

Bird MalaysiaBird Malaysia

Limelight Networks

Fall for TennesseeFall for Tennessee

GalaicofoliaGalaciofolia

AugustAugust

GoMediaZineGoMediaZine

Helmy BernHelmy Bern

ElectriCurrentElectriCurrent

Navigant Consulting

Further reading on dropdown menus

About the Author

Andrew is the originator and primary contributer for this blog. He is a web and graphic designer with a passion for helping aspiring designers develop their skills.

Related Posts:

Join the discussion!

13 responses so far.

  1. liam
    October 24, 2008

    Brilliant collection, really top quality examples. Nice one

    liam´s last post was… Tutorial: Creating Custom Write Panels in WordPress

  2. 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?

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

  4. 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!

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

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

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

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

  9. Naldz Graphics
    October 25, 2008

    i love gomediazine dropdown navigation the most:)nice post Andrew!!!

    Ronald

  10. Leigh Taylor
    October 26, 2008

    You should also consider msnbc.com drop down too

    Great list anyway

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

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

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

Leave a Reply

CommentLuv Enabled