Advertisment
Navigation 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
2. RainSong Media
3. Clockwork
4. Freestyle Sport
5. Fight For Future
6. Plug And Play Design
7. Zaplee
8. Media Temple
9. Deportation Day
10. Active Consulting
11. Arbutus Photography
12. Flickr Design
13. Deren
14. Lupus
15. Soh Takana
16. Thoughtbot
17. Abduzeedo
18. Squaredit
19. 3.7 Designs
20. Evan Eckard
21. Pixel Resort
22. Lonn Roth
23. Interactive
24. Nathan Borror
25. UX Booth
26. Clear Left
27. Real Mac Software
28. Appstorm
29. Dragon Interactive
30. Helmy Bern
[...] kaliteli ve ilham alabileceğiniz 30 Css tabanlı navigasyon örneği burada listelenmiş. Posted in Css, Web Programlama, Web Tasarım « Harika İnfografik Örnekleri Minimal [...]
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
ama ben bunu da çok sevdim :)
this is thank you.. :)
[...] 30 Cutting Edge Examples Of CSS Navigation from 1stwebdesigner [...]
[...] yazının devamı [...]
hmm thankss sure… :)
I love the collection… thankx for sharing.
nikhil´s last blog ..Easy CSS Tooltip
[...] wie man sie selten sieht. Auf Services geklickt. Lustige Idee für die erste Ebene. Wenn ich auch kein Wort verstehe, [...]
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.:)
[...] 30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials [...]
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.)
These are awesome. I love the pixlogix menu.
[...] via:30 Cutting Edge Examples Of CSS Navigation AKPC_IDS += "1063,";Popularity: unranked 上一篇:14个实用的前端开发备忘录 上一篇: [...]
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.
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!
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?
Liam,
i agree in all points. Nothing really new and special here.
those are great rounds of beautiful desings.. i definitely can’t get enough of them. thanks for sharing!
[...] for web design tutorial and inspiration. They’re running a great gallery piece today of creative CSS navigation ideas. It’s a great post to stop by if you’re looking for something to make your navigation [...]
Great collection :-)
Tutorijali HDonWEB´s last blog ..Exact Audio Copy Vodič za početnike
[...] Birbirinden kaliteli ve ilham alabileceğiniz 30 Css tabanlı navigasyon örneği burada listelenmiş. [...]
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
hey, it really help me. It can be my inspiration. I want to change my navigation style.
Thanks
Blogger Template Place´s last blog ..WPStream Blogger Template
Nice compilation. I really liked 7, 15, 21, 26 and 29.
Anna´s last blog ..5 interesting tidbits I read today
[...] January 19, 2010 · Leave a Comment 30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials. [...]
[...] 30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials (tags: css) [...]
[...] 30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials (tags: css webdesign navigation inspiration design menu) [...]
great complication, thanks for the list.
Matthew Heidenreich´s last blog ..Six Websites to Get the Perfect Color Palette
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
Inside the Webb´s last blog ..Interview with Little Box of Ideas Design Blog
[...] 30 Cutting Edge Examples Of CSS Navigation [...]
[...] 30 Cutting Edge Examples Of CSS Navigation Submitted by Editorial Team [...]
Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.
Web4half´s last blog ..Website Navigation Tips
This is great, I’m in the process of redesigning my portfolio site and this is great inspiration for creative navigation!
Awesome menu, very inspirational
Orange County Web Design Company´s last blog ..Get Paid NOW Taking Free Surveys – A New Program That Works
Nice collection. Thanks for posting.
I think #19 – 3.7 Design’s – navigation is pretty innovative.
Hi Tom,
Great post, I especially like the Media Temple menu. Keep up the good work.
=== popurls.com === popular today…
yeah! this story has entered the popular today section on popurls.com…
[...] 30 cutting edge examples of CSS navigation – Link. [...]
Great collection of interesting styled css-based navigations, thank ya! Maybe the Splash-Page from http://www.baubar-gmbh.de might be interesting aswell.
Love
Ya.. this is something awesome :)
SmashingWebs.com´s last blog ..Most Wanted HTML 5 Tutorials
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..
@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!
@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
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!
Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.
-Deepu