30 Cutting Edge Examples Of CSS Navigation

Posted in Coding, HTML & CSS5 years ago • Written by 27 Comments

Title-css-navigation-inspiring-webdesignNavigation is one of those things you have to get right in order to provide your users with easy access to your website’s content. Today we’ll take a look at 30 well-designed navigation menus. Some of them use CSS sprites, some use jQuery or another library, and others take advantage of the great properties available in CSS3.

I hope you will  enjoy this post. Please feel free to chime in by leaving a comment at the end of this post as well!

1. Pixlogix

Pixlogix-css-navigation-inspiring-webdesign

2. RainSong Media

Rainsong-media-css-navigation-inspiring-webdesign

3. Clockwork

Clockwork-css-navigation-inspiring-webdesign

4. Freestyle Sport

Freestyle-sport-css-navigation-inspiring-webdesign

5. Fight For Future

Fight-future-css-navigation-inspiring-webdesign

6. Plug And Play Design

Plug-play-css-navigation-inspiring-webdesign

7. Zaplee

Zaplee-css-navigation-inspiring-webdesign

8. Media Temple

Media-temple-css-navigation-inspiring-webdesign

9. Deportation Day

Deportation-day-css-navigation-inspiring-webdesign

10. Active Consulting

Active-consulting-css-navigation-inspiring-webdesign

11. Arbutus Photography

Arbutus-photography-css-navigation-inspiring-webdesign

12. Flickr Design

Flickr-design-css-navigation-inspiring-webdesign

13. Deren

Deren-css-navigation-inspiring-webdesign

14. Lupus

Lupus-css-navigation-inspiring-webdesign

15. Soh Takana

Soh-takana-css-navigation-inspiring-webdesign

16. Thoughtbot

Thought-bot-css-navigation-inspiring-webdesign

17. Abduzeedo

Abduzeedo-css-navigation-inspiring-webdesign

18. Squaredit

Squaredit-css-navigation-inspiring-webdesign

19. 3.7 Designs

37designs-css-navigation-inspiring-webdesign

20. Evan Eckard

Evan-eckard-css-navigation-inspiring-webdesign

21. Pixel Resort

Pixel-resort-css-navigation-inspiring-webdesign

22. Lonn Roth

Lonn-roth-css-navigation-inspiring-webdesign

23. Interactive

Interactive-css-navigation-inspiring-webdesign

24. Nathan Borror

Nathan-css-navigation-inspiring-webdesign

25. UX Booth

Ux-booth-css-navigation-inspiring-webdesign

26. Clear Left

Clear-left-css-navigation-inspiring-webdesign

27. Real Mac Software

Mac-software-css-navigation-inspiring-webdesign

28. Appstorm

Appstorm-css-navigation-inspiring-webdesign

29. Dragon Interactive

Dragon-interactive-css-navigation-inspiring-webdesign

30. Helmy Bern

Helmy-bern-css-navigation-inspiring-webdesign

5 Written ArticlesWebsite

Tom Walker is a writer and designer who is based in the UK and works for a supplier of HP laser toner cartridges as well as inks, paper and other printing accessories. For more of his writing about art, design and technology, check out CreativeCloud.

27 Comments Best Comments First
  • Danny

    Tuesday, January 19th, 2010 14:11

    1

    Thank you for good collection Tom but i have to mention one important thing to Dainis….

    Hi Dainis;

    Sorry to say that but your blog is becoming only showcases of sites and blogs by your guest writers day by day..

    0
    • Mike van Hoenselaar

      Tuesday, January 19th, 2010 16:36

      2

      @Danny: No offence but 6 out of the 10 last articles are from Dainis. No?

      Great post. Lots of great websites. A lot of them I didn’t know. Thanks!

      0
      • Danny

        Tuesday, January 19th, 2010 16:51

        3

        @Mike van Hoenselaar

        No defence:) but i didn’t say anything about the latest Dainis Articles.

        Dainis is doing fine and if you read his articles they are all great but please just check out the other pages

        bla bla designs,bla bla websites,showcase of bla bla websites:))

        Anyway no need to break hearts:)..Keep on going guys

        0
        • Dainis Graveris

          Tuesday, January 19th, 2010 18:27

          4

          Oh, I understand your complains, but now site is getting a bunch new guest writers and to get started I try to suggest them easier article ideas, that’s why there is so much inspirational, showcase articles lately.

          However I am now focusing to more articles, I want them to come out daily. I cannot sustain that article quality daily, so I need guest writers, to relieve me a little bit.

          I am hoping on future there will be more quality articles coming out and often! Some can complain that there is no need to write so often, but I think if I want to have any chances with top niche design blogs, I need to grow quantity and quality.

          Please be patient, you will be rewarded with quality! And thank you for your comment and support! Appreciated!

          0
  • mavericdesign.com

    Tuesday, January 19th, 2010 18:19

    10

    Hi Tom,

    Great post, I especially like the Media Temple menu. Keep up the good work.

    0
  • Web4half

    Tuesday, January 19th, 2010 20:50

    11

    Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.

    0
  • Anna

    Wednesday, January 20th, 2010 06:01

    13

    Nice compilation. I really liked 7, 15, 21, 26 and 29.

    0
  • Inside the Webb

    Tuesday, January 19th, 2010 21:55

    12

    This is great man! 1st Web Designer is one of my favorite blogs, and rightfully so with these kinds of articles. CSS navigation menus aren’t easy to come by on the web, especially of this high quality

    0
  • SmashingWebs.com

    Tuesday, January 19th, 2010 16:38

    8

    Ya.. this is something awesome :)

    0
  • Matthew Heidenreich

    Tuesday, January 19th, 2010 23:21

    7

    great complication, thanks for the list.

    0
  • Deepu Balan

    Tuesday, January 19th, 2010 13:50

    6

    Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.

    -Deepu

    0
  • M.R.

    Tuesday, January 19th, 2010 19:02

    5

    Nice collection. Thanks for posting.

    I think #19 – 3.7 Design’s – navigation is pretty innovative.

    0
  • dimaks

    Wednesday, January 20th, 2010 20:57

    14

    those are great rounds of beautiful desings.. i definitely can’t get enough of them. thanks for sharing!

    0
  • Tutorijali HDonWEB

    Wednesday, January 20th, 2010 14:57

    15

    Great collection :-)

    0
  • Rafael

    Sunday, February 20th, 2011 07:55

    23

    Excelent !!! great!!

    0
  • Harry

    Wednesday, March 9th, 2011 03:23

    24

    Great examples, really inspirational. Got a new site I need to get done for a client and I’m definitely going to take a look at this stuff again to see if I can adapt some of it!

    0
  • Christian Mungle

    Thursday, May 19th, 2011 11:47

    25

    Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice practices and we are looking to exchange strategies with others, why not shoot me an email if interested.

    0
    • Rean John Uehara

      Thursday, May 19th, 2011 13:09

      26

      We do experience spam everyday, but Akismet does the trick. :P

      0
  • Charla Strough

    Tuesday, August 16th, 2011 15:30

    27

    What a beautiful work of love! Thank you for using your talents for the Glory of God. And dont get discouraged with the negative comments. Pray for them that they may connect with the Truth of how much God Loves Them.God Bless You.

    0
  • nikhil

    Friday, January 29th, 2010 11:21

    22

    I love the collection… thankx for sharing.

    0
  • Rachelle Galang

    Saturday, January 23rd, 2010 17:27

    21

    It is good that you emphasized here the importance of the navigation since some of the designer did not pay attention about the usefulness of this. Let me share this post to some of my web designer friends.:)

    0
  • dr john

    Thursday, January 21st, 2010 03:34

    16

    Like some others, I’m not sure about “cutting edge” navigation, but there are so great examples here (I have collection of sites with good menus for inspiration, and several of them are in your list too).

    But clockwork.net ??? sorry, but it does nothing for me, and requires a lot of fishing around with the mouse at times as not all links are obvious.

    0
    • Meghan Wilker

      Thursday, January 21st, 2010 20:11

      18

      dr john,

      You make a valid point about some of our links not being obvious enough; we’re taking a look at that.

      Thanks for the feedback!

      0
  • Liam

    Thursday, January 21st, 2010 02:21

    17

    Not sure why these are “Cutting Edge”?

    Most of the navigations listed in this post are used by many websites, making them pretty ordinary, most using CSS instead of the old fashioned Image Roll-overs.

    Maybe #24 is quite original, looks good and works well, but there must be better examples of “Cutting Edge” CSS Nav designs out there?

    0
  • Jonathan

    Friday, January 22nd, 2010 11:35

    20

    Someone please slap Rainsong with the progressive enhancement stick – their main nav has no hover effect when JS is off – slightly petty I know, but I know at least 10 ppl who browse without JS on (and not all of them are web developers etc.)

    0
  • Tom Ross

    Thursday, January 21st, 2010 16:38

    19

    These are awesome. I love the pixlogix menu.

    0
  • Charla Strough

    Tuesday, August 16th, 2011 15:30

    27

    What a beautiful work of love! Thank you for using your talents for the Glory of God. And dont get discouraged with the negative comments. Pray for them that they may connect with the Truth of how much God Loves Them.God Bless You.

    0
  • Christian Mungle

    Thursday, May 19th, 2011 11:47

    25

    Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice practices and we are looking to exchange strategies with others, why not shoot me an email if interested.

    0
    • Rean John Uehara

      Thursday, May 19th, 2011 13:09

      26

      We do experience spam everyday, but Akismet does the trick. :P

      0
  • Harry

    Wednesday, March 9th, 2011 03:23

    24

    Great examples, really inspirational. Got a new site I need to get done for a client and I’m definitely going to take a look at this stuff again to see if I can adapt some of it!

    0
  • Rafael

    Sunday, February 20th, 2011 07:55

    23

    Excelent !!! great!!

    0
  • nikhil

    Friday, January 29th, 2010 11:21

    22

    I love the collection… thankx for sharing.

    0
  • Rachelle Galang

    Saturday, January 23rd, 2010 17:27

    21

    It is good that you emphasized here the importance of the navigation since some of the designer did not pay attention about the usefulness of this. Let me share this post to some of my web designer friends.:)

    0
  • Jonathan

    Friday, January 22nd, 2010 11:35

    20

    Someone please slap Rainsong with the progressive enhancement stick – their main nav has no hover effect when JS is off – slightly petty I know, but I know at least 10 ppl who browse without JS on (and not all of them are web developers etc.)

    0
  • Tom Ross

    Thursday, January 21st, 2010 16:38

    19

    These are awesome. I love the pixlogix menu.

    0
  • Liam

    Thursday, January 21st, 2010 02:21

    17

    Not sure why these are “Cutting Edge”?

    Most of the navigations listed in this post are used by many websites, making them pretty ordinary, most using CSS instead of the old fashioned Image Roll-overs.

    Maybe #24 is quite original, looks good and works well, but there must be better examples of “Cutting Edge” CSS Nav designs out there?

    0
  • dr john

    Thursday, January 21st, 2010 03:34

    16

    Like some others, I’m not sure about “cutting edge” navigation, but there are so great examples here (I have collection of sites with good menus for inspiration, and several of them are in your list too).

    But clockwork.net ??? sorry, but it does nothing for me, and requires a lot of fishing around with the mouse at times as not all links are obvious.

    0
    • Meghan Wilker

      Thursday, January 21st, 2010 20:11

      18

      dr john,

      You make a valid point about some of our links not being obvious enough; we’re taking a look at that.

      Thanks for the feedback!

      0
  • Tutorijali HDonWEB

    Wednesday, January 20th, 2010 14:57

    15

    Great collection :-)

    0
  • dimaks

    Wednesday, January 20th, 2010 20:57

    14

    those are great rounds of beautiful desings.. i definitely can’t get enough of them. thanks for sharing!

    0
  • Anna

    Wednesday, January 20th, 2010 06:01

    13

    Nice compilation. I really liked 7, 15, 21, 26 and 29.

    0
  • Inside the Webb

    Tuesday, January 19th, 2010 21:55

    12

    This is great man! 1st Web Designer is one of my favorite blogs, and rightfully so with these kinds of articles. CSS navigation menus aren’t easy to come by on the web, especially of this high quality

    0
  • Web4half

    Tuesday, January 19th, 2010 20:50

    11

    Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.

    0
  • mavericdesign.com

    Tuesday, January 19th, 2010 18:19

    10

    Hi Tom,

    Great post, I especially like the Media Temple menu. Keep up the good work.

    0
  • SmashingWebs.com

    Tuesday, January 19th, 2010 16:38

    8

    Ya.. this is something awesome :)

    0
  • Matthew Heidenreich

    Tuesday, January 19th, 2010 23:21

    7

    great complication, thanks for the list.

    0
  • Deepu Balan

    Tuesday, January 19th, 2010 13:50

    6

    Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.

    -Deepu

    0
  • M.R.

    Tuesday, January 19th, 2010 19:02

    5

    Nice collection. Thanks for posting.

    I think #19 – 3.7 Design’s – navigation is pretty innovative.

    0
  • Danny

    Tuesday, January 19th, 2010 14:11

    1

    Thank you for good collection Tom but i have to mention one important thing to Dainis….

    Hi Dainis;

    Sorry to say that but your blog is becoming only showcases of sites and blogs by your guest writers day by day..

    0
    • Mike van Hoenselaar

      Tuesday, January 19th, 2010 16:36

      2

      @Danny: No offence but 6 out of the 10 last articles are from Dainis. No?

      Great post. Lots of great websites. A lot of them I didn’t know. Thanks!

      0
      • Danny

        Tuesday, January 19th, 2010 16:51

        3

        @Mike van Hoenselaar

        No defence:) but i didn’t say anything about the latest Dainis Articles.

        Dainis is doing fine and if you read his articles they are all great but please just check out the other pages

        bla bla designs,bla bla websites,showcase of bla bla websites:))

        Anyway no need to break hearts:)..Keep on going guys

        0
        • Dainis Graveris

          Tuesday, January 19th, 2010 18:27

          4

          Oh, I understand your complains, but now site is getting a bunch new guest writers and to get started I try to suggest them easier article ideas, that’s why there is so much inspirational, showcase articles lately.

          However I am now focusing to more articles, I want them to come out daily. I cannot sustain that article quality daily, so I need guest writers, to relieve me a little bit.

          I am hoping on future there will be more quality articles coming out and often! Some can complain that there is no need to write so often, but I think if I want to have any chances with top niche design blogs, I need to grow quantity and quality.

          Please be patient, you will be rewarded with quality! And thank you for your comment and support! Appreciated!

          0

Comments are closed.

54.196.195.158 - unknown - unknown - US