15 Websites with Slick Dropdown Navigation

By   |  Stashed in Inspiration
14

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

Bird Malaysia Bird Malaysia

Limelight Networks

Fall for Tennessee Fall for Tennessee

Galaicofolia Galaciofolia

August August

GoMediaZine GoMediaZine

Helmy Bern Helmy Bern

ElectriCurrent ElectriCurrent

Navigant Consulting

Further 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

    • About the Author

    Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

    More posts by

    Website      

    • http://www.wefunction.com liam

      Brilliant collection, really top quality examples. Nice one

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

    • Dean Houle

      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

      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.

    • http://arbent.net Angie Bowen

      You’ve shown some awesome examples here. I love Helmy Bern & Navigant Consulting

      Angie Bowen´s last post was… MyGuestBlog!

    • http://www.myinkblog.com Andrew Houle

      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.

    • http://blog.kevincrafts.com Kevin

      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

    • http://www.1stwebdesigner.com Dainis Graveris

      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

    • http://www.myinkblog.com Andrew Houle

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

    • http://naldzgraphics.com Naldz Graphics

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

      Ronald

    • http://www.leightaylor.co.uk Leigh Taylor

      You should also consider msnbc.com drop down too

      Great list anyway

    • http://blog.cfdesignz.co.uk Craig Farrall

      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

    • http://www.web-kreation.com jeeremie

      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

    • http://www.zektek.com Eric

      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

    • http://www.carpcgadgets.com/?Id=12&Desc=Double-Din-Navigation Double Din Navigation

      I like Helmy Bern design, May be due to the graphics. But the blend of images and colours are excellent.