CSS-Based Navigation Menus: Modern Solutions
Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.
So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.
Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.
PS: Over the last few months we’ve reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You’ll find even more CSS-related articles in our CSS Section.
PSS: We have included some DHTML- and JavaScript-based navigation menus in this list by mistake. Sorry for inconvenience.
CSS-Based Navigation Menus
1. Change.org
2. N.Design Studio | Design & Blog
3. Good Creative – Web and Graphic Design
6. CSS Vault » The Web’s CSS Site
7. notiam.com
8. Jamie Huskisson: Full time UK PHP freelance developer
9. Web design, development and consultancy from Ottawa, Canada – Snook.ca
10. BREAKER DESIGN
11. Jen Gordon
12. Tulumarka
13. Ars Technica
14. CSS Beauty | CSS Design, News, Jobs, Community, Web Standards
16. Triple Crown Customer Service
17. microformats
18. Badboy.ro
19. GetMenus.ca
20. Wedding Extravaganza 2007 – A Perfect Marriage
21. Job Pile – Aggregating the Best Job Boards on the Web – Artypapers
22. Norman Morrow & Co – Estate Agents In Crumlin, Northern Ireland
23. Listal – List the stuff you love! Movies, TV, music, games and books
24. folietto
25. Tony Yoo – Online Showcase (version2)
27. Denbighshire Supporting Business
28. Pulmad, peod, lillesalong… – Annilill Peoteenindus
29. ExpressionEngine – Publish Your Universe!
30. coda.coza
31. purevolume™ | We’re Listening To You
32. EGOLOUNGE *Büro für digitales Design
33. Merix – Internet Technologies
34. Bartelme Design | Showroom
36. CSS3 . info – Everything you need to know about CSS3
37. nclud™ a creative web design agency
39. ExpressionEngine – Publish Your Universe!
40. Silverpoint: Web Solutions for Schools
41. Jambor-ee – Celebrating ExpressionEngine
43. Scribd – Home
45. Photoshop Tutorials and Articles – Tutorial Blog
46. Welcome to Buzz — Buzz Recruitment
47. Michal Zapoměl – český vlasový design | czech hair design
49. M122Arts Mixed Media and Technology // oo*o
50. KazanShops.Ru
51. Stone inc. – Aménagements Paysager, Pavés.
52. Pixellogo
53. AUSMAG – das Australien Work & Travel Portal
Roy Tomeij
March 14th, 2007 9:53 pmModern solutions? Excuse me, but some of the above sites use image roll overs. Besides that you need to have javascript enabled to see these, they are plain inaccessible to other user agents than the standard browsers. So much for ‘usability’ and ‘using basic CSS styling’.
Stephen Bates
January 4th, 2010 2:17 pmNot to mention that 90% of these are just tabbed horizontal nav menus. Wherein lies the “solution”?
Kyle
November 11th, 2010 11:24 pmCSS can be used for roll-over effects without JavaScript animations. (e.g. a:hover)
Chaaban
March 14th, 2007 9:56 pmYou guys never stop amazing me :)
Smashing is a name that fit you .
where is the digg button , need to digg this .
Chaaban
March 14th, 2007 10:02 pmGreat work .
Keep it up !
it would be nice if we also had access to the source of those designs .
Peter
March 14th, 2007 10:44 pmIt strikes me as mostly design variations on the same theme.
For true originality you could have restricted this post to just one link :
http://www.cssplay.co.uk/menus/index.html
Al Kirby
April 14th, 2010 1:12 pm@ Peter Holy damn!!! Thanx for that link.
Gizmi
March 14th, 2007 11:06 pmChaaban, they got banned from Digg. Read their “8 Things You Should Know About Smashing Magazine” post.
Greg
March 14th, 2007 11:20 pmis it my browser/computer or is the N.Design nav bar very laggy?
Laurens
March 15th, 2007 12:37 amVery nice to see these great solutions.. but was there are reason for not putting in any vertikal CSS menu’s?
Скакунов Александр
March 15th, 2007 1:22 amI don’t see anything attractive, but thanks for the set.
Digg Link
March 15th, 2007 2:55 amhttp://www.digg.com/design/CSS_Based_Navigation_Menus_Modern_Solutions
TimLetscher
March 15th, 2007 3:03 amI’m in no way bashing these examples or any of the other fine fine sets assembled here, but does anyone else find it odd that the majority of all these examples are design shops or personal portfolios?
Can we not sell these ideas to our clients?
Great work though!
Cheers,Tim
wn
March 15th, 2007 3:37 amTo get the .css code…
1) View source code of the page
2) Grab the path to the .css inside the HEAD tags at the top of the page.
3) Place the path of the .css at the end of the URL in the browser
4) You’ll see the .css file.
Forgiste
March 15th, 2007 3:52 am@ Roy
There is such a thing as a css image rollover, I use one on my as yet unfinished site redesign.
Jen Simmons
March 15th, 2007 4:00 amCheck out this site’s all-css nav. It’s different than the two dozen tabbed horizontal bars.
Vitaly Friedman & Sven Lennartz
March 15th, 2007 4:11 amJen Simmons, thanks for the reference. Interesting solution, indeed.
wn
March 15th, 2007 4:23 amJoost Money…
Not everyone who views source code steals it…
Some of us use it to learn from…
kurt
March 15th, 2007 4:29 amThese are all great samples of well designed navigation. However many of them suffer from the “flicker” effect that is associated with a pure css navigation. Although it is mainly only in IE its still a problem… Anyone know how to solve this?
Luc
March 15th, 2007 4:38 amMaybe this site gives you some inspiriation too.
Nice Navigation: http://www.favouritz.com/
troels
March 15th, 2007 5:10 amHey. You forgot to mention ‘ExpressionEngine – Publish Your Universe!’
RonnieSan
March 15th, 2007 5:38 amDesigners/Coders should learn not to make their hover the same as their “You are here” style. It’s unusable. When designing a navigation, you should have at least three distinct states: off, hover, active.
Roy Tomeij
March 15th, 2007 5:42 am@ Forgiste: using CSS you usually have the roll over on the link (which is the way you should use it). I was referring to the javascript methods.
bogy
March 15th, 2007 5:43 amCome on, anyone interesting about web developing and design already know these an a whole lot more. What the point of making list of them. “Come on people digg us and click the links so we make some money”, that’s the point, isn’t it?
Seyora
March 15th, 2007 6:23 am@ Jen Simmons: That’s just mystery-meat navigation. Doesn’t score too well in terms of accessibility.
sky
March 15th, 2007 6:54 amyou can get all of these sites css files..
But you manually you have to clear your temp directory, then go to that page and then refresh the temp directory the css will be there..with the whole page layout..:0 have fun.. and we didnt tell ya how to do this,,lol
Sam
March 15th, 2007 6:56 amI dunno whats with all the unappreciative haters. I personally love going through your lists, I get massive amounts of design ideas and see new techniques and styles. I don’t really give a **** if its badly coded. Theres still alot to gain, and the list would have taken a fair amount of effort to compile. So what if they are making money from all the traffic, good on them.
Anyways keep up the good work and don’t let the haters get you down.
fijis
March 15th, 2007 7:14 amThe tabs are an obvious trend but I also noticed a bunch of carrots/pointers/wedges. I’ll have to keep an eye open and see if this is a general web trend.
criticalerror
March 15th, 2007 7:24 amgreat work…!!!
Myra
March 15th, 2007 8:04 amYOU SURE ARE A SMART GUY bogy!!!
There. That was the subtext of your post and you got what you wanted. Happy?
Now spare us the superior attitude and disdain. It’s tiresome.
Jamie Huskisson
March 15th, 2007 8:06 amThanks for the feature guys. I only launched the new layout with that menu last night around 11pm.. so to find out by 4-5pm that it had been posted up here was amusing :)
Jon
March 15th, 2007 11:34 amI took a look at the first few, saw that they were either image-based and thus completely unscalable or had text in them that refused to scale with the browser text height. Meh. Any fool can create a pretty-looking menu if you’re fixing your size. Show me pretty menus that scale up and down gracefully and then I’m impressed.
leonurus
March 15th, 2007 1:09 pmis it my browser/computer or is the N.Design nav bar very laggy?
Paul Stamatiou
March 15th, 2007 2:52 pmNow, which of these menu styles can be done using no images at all. I try to keep loading time on my site top-notch and can’t justify extra images for anything.
loops
March 15th, 2007 7:38 pmThere have been quite a few css navigation menu round-ups lately but you’ve again managed to list some of the best. Thanks!
Mindloop
March 15th, 2007 7:55 pmFound this list a bit uninspiring, just a whole lot variations on tabs.
Some of theme even have problems like a flicker between the normal and :hover state or worse javascript for a rollover that could easily be done with css.
metv
March 15th, 2007 9:49 pm“PSS”? I think you mean PPS.
Kevin
March 15th, 2007 11:48 pmwhy is this on digg.com? this sucks. where is the code?
who gives a crap about a bunch of screens and links to sites?
greg
March 16th, 2007 5:51 amcheck out these menus too: http://www.13styles.com
Greg
March 16th, 2007 10:03 amAnother tabbed one I stumbed across: http://www.brusheezy.com
365hope.com
March 16th, 2007 11:40 am这些都是导航之精品！
Jeff
March 16th, 2007 5:23 pmnot to be rude, but it should be PPS instead of PSS. PS stands for postscript so you want to say post-postscript, not postscript-script.
Excellent set of examples. I think I’ll be adding this site to my regular routine
imaginepaolo
March 16th, 2007 8:20 pm[...] smashingmagazine best user friendly navigation and solutions [...]
Jeff Hill
March 16th, 2007 9:15 pm“Silverpoint: Web Solutions for Schools” could be called a solution if the goal is to confuse the user equally as much as look pretty. It’s almost like a drug. I’ll coin the term “crackNav”.
redhathacker
March 17th, 2007 3:29 amwhat about this menu: bnet.com Is it nice, isn’t it?
Raphael
March 18th, 2007 3:01 amNice to see but isn’t most of it the same?
Dreyer Media
March 18th, 2007 7:02 amI must say, this is a great list!
e_anka
March 19th, 2007 2:21 amA nice set of examples, but not all of them are user-friendly: I call a menu user-friendly if it highlights the current page (but doesn’t link to it) and hovers over other links – to show you where you can go from here. I think it’s the minimum we can do to make the web more friendly place.
redwall_hp
March 26th, 2007 12:53 pmUh, ExpressionEngine is in there twice…
Henawi
May 5th, 2007 8:45 amThe best collection I’ve ever see, thank you.
Gold Coast Web Designer
May 22nd, 2007 12:34 pmgreat list – very useful – I’m sure I’ll be referring to this list many times!
webguy
May 22nd, 2007 2:30 pmyo guys i now how to get the CSS source code for the different sites, but how to i get to see the images to use for the diferent designe, is there a way to get to the images to be downloaded? please let me know, it will be so helpful..
Lisa
May 25th, 2007 4:03 pmI don’t know why people keep moaning about some posts on this site. If you don’t like the articles don’t read them. Its as simple as that.
Sahibinden
June 8th, 2007 9:57 pmgerat menu works. i will select one of them and try as soon as possible.
iddaa
June 21st, 2007 11:22 pmRealy great work…!!!
Thank you very much.
Flux
July 22nd, 2007 5:14 pmIt’s cool! How i can use menu like Triple Crown Customer Service in my blog?. Help me please.
abdul basit
July 23rd, 2007 3:40 pmThis is really really great.I would say, probably, that this is the thing i found over the net in last 5 years, the best one.Cool, great and truly amazing.A valueable resource for a developer.
Ryan
August 7th, 2007 3:23 amWhat is it about that list that is so innovative and modern? These are just a bunch of examples of tabbed navigations. Last time I checked, tabs have been used forever.
Dugu
August 9th, 2007 12:28 amOmg.
This was what I was looking for.
Really Great.
jez
August 10th, 2007 5:37 amI am interested in the topics discussed but have been feeling a little intimidated by the thought of the work.
I knew there was a way to do this but I didn’t want to have to use a forum software for this functionality, because, the actual forum aspect would have been superfluous… don’t add more than you need seems to be a good policy
Syed Balkhi
August 20th, 2007 2:19 pmit would be even better if there are like tutorials below each post showing how to do each :)
that would be some thing shakie smashing
Samuel Mobile Phone Deals
August 28th, 2007 1:39 amI was really looking for some small CSS menues for my site. I was really very interested in some of the above but there is not CSS code provided would have been great. Is there any chance that this code could be place on the site for others to test and try.
Thanks
css xhtml develoepr
August 31st, 2007 4:13 pmGreat design and menu solutions, though it is very simple to make css list menus which i guess these menus are….
javier
September 12th, 2007 7:15 amMy favorite… MacRabbit!
Johnelle
July 7th, 2011 1:37 amTheres nothing like the relief of finding what youre looikng for.
vreme
October 5th, 2007 4:23 amThank you for this great list! My personal favorite from all above is Tony Yoo – others are mostly just too plain.
Kyle
November 2nd, 2007 2:17 amExcellent Article! Very helpfull and informative
saif
November 20th, 2007 7:48 pmThank you for this great
Steve
November 29th, 2007 1:59 amNice collection
Thanks!
Digital Base
December 11th, 2007 1:39 amVery good collection, trying to understand the general idea & markup of the css files will allow you to make the most beautiful navigation menu’s yourself. I started with this collection, it learned me alot.
Marko
January 1st, 2008 4:13 pmI don’t see anything attractive for my site filipinafianceevisa.com but thanks for the set.
Roy
January 7th, 2008 4:03 pmThe first thing you have to think about is, what sort of people is your website for. Who are you trying to connect/communicate with. A website is an communication device, so let it be that way. Make navigations simple, understandful en sometimes fun.
Just as effective as above sets are, but this is more in style of the theme of the website. If people click on it, than it’s ok ;)
Josh
February 3rd, 2008 12:19 pmYou can easily find, view, and copy the source of any website.
In the Firefox menu bar, click ‘View’ and then ‘Page Source’ or just Ctrl +U.
In IE and other browsers it’s technically the same process.
Hope this helps.
-Josh
Sunitha
February 5th, 2008 5:30 pmI have few queries can I know where can I post the question?
Belive Blog
February 26th, 2008 2:02 amGreat resource for css menus.
thanks
Dutch computer community
February 26th, 2008 10:24 amNice list!
Michael Goldstein
March 4th, 2008 12:49 amsmashing magazine! a really great resource :) // Michael
jeremy24
March 5th, 2008 10:40 pmFrom a software engineering point of view, CSS is a huge ball of mess. It’s counterintuitive and illogical much of the time. As a software engineer it disgusts me how much time I need to spend on hacks and making things align properly. Even when things *should* work, they don’t. Much of this can be blamed on the inconsistencies around browsers. The use of CSS “Frameworks” seems like the best bet.
I want to spend more time programming the back-end (the substance of the web application), and not messing around with hacks in a trial and error manner. CSS has commited so many software engineering sins that it’s not funny.
But thank you so much Smashing Magazine for clearing up the illogicalities of CSS.
mehmet
March 7th, 2008 1:33 amKeep rocking the scene!
Jogos Grátis
March 12th, 2008 8:45 pmgreat list – very useful – I’m sure I’ll be referring to this list many times!
anjana
March 20th, 2008 11:16 pmur collections are really good.
but threr r no vertical menus???????///
Secret Owl
April 3rd, 2008 6:20 pmAnother good list, but a lot of those are pretty bland. Still, y’know?
Patrick Freitag
April 15th, 2008 11:47 pm2 times Expression Engine. Seems you like it, hmm? ;)
Matt
April 18th, 2008 10:05 amcheck out the menu generator at http://bellspace.net it includes vertical/horizontal support and keyboard-based navigation
Kate
May 2nd, 2008 6:35 amGreat source of links! Thanks! I’ve found another website that contains quite a few different website navigitaion css tutorials.
http://css.maxdesign.com.au/listamatic/
Winter
July 7th, 2011 11:57 amArticles like this are an example of quick, helpful anrwses.
Gift Bird
May 9th, 2008 9:32 pmVery nice list. These give me a few good ideas for my next design project. Too bad some of the links no longer provide working examples.
MARk
May 21st, 2008 9:06 amBut there isn’t a menu template with submenu?
JSHAW
June 23rd, 2008 9:54 amAwesome resources, great post.
Agust Gudbjornsson
July 15th, 2008 9:39 amGreat article guys (as usual!),
Really need to comment on some of the users who commented here above where they talk about the modern part of the menus.
The meaning of modern is not something that you don’t see anywhere else or have never seen before, modern means that its used by variety of companies/people in the today market, in this case websites. By saying that these menus are not modern is kind of stupidity or lack of knowledge over the today´s web designs, since you see nearly all major players (such as apple.com) online use menus such as those.
Tabbed menus have been available since paper tabbed bags where created, even before that time. That does not mean that they cant be modern in the year 2008 on websites :o)
Weird to see how people can always complain, or be the “clever” one.
Appreciate the time that these guys are giving us here at SM, awesome content and good resource to keep alive!
Agust
Guilherme
August 26th, 2008 7:24 amBut all these menus possess images as background – It will be that of pra not to make a modern and pretty menu only with css?
TRo
September 9th, 2008 1:29 pmthanks a lot…
feha
September 11th, 2008 2:25 amNot just sliding doors … :-)
big bag
September 12th, 2008 1:35 amcolourful!
wonderful!
powerful!
beautiful!
caren
September 15th, 2008 12:55 amnice menus ….
web standard developer cleverclick
September 16th, 2008 9:33 amWeb Standards and Search Engine Optimization are great with these solutions instead of regular buttons. I find these css menus very useful and interesting, though i dont practice everything i see but have them in mind for clients that also are interested in web standards development with xhtml and css solutions. There are some issues with IE 6 sometimes but mostly they work good and its great to have them available.
Great work
polaris
September 19th, 2008 1:18 amvery cool~~~
bara
October 4th, 2008 5:57 ambangsaaaat keren mampus !!! musti gw ambil nih !
Rajeev
October 17th, 2008 6:48 amperfectly pure css effects…………thanks
iddaa
October 19th, 2008 7:02 amHello,
I am loving smashing magazine too.
Just wondering… near the beginning of the article all of these import style sheets are mentioned as part of a master stylesheet. I was wondering what the difference of these might be. What kinds of things each one might hold. I had sort of thought that reset.css and global.css would be pretty much the same?
Thanks
Linden
October 28th, 2008 7:36 amjeremy24, I don’t know how you think CSS is the problem. Maybe you can explain.
Software engineering and web design are very different all be it dancing entities. CSS makes web design easier than ever to update, standardize, make accessible and flexible. Aside from by the stubborn developers of IE, CSS is accepted. Interface design requires “fixes” and “tweeks” and good ol’ personal attention to make the best legibility, usability and accessibility possible- that pesky human element. CSS has actually made it possible to tweek, get this, less while increasing the standard of design and clean code.
Lets not forget our front end designers. please. If you think you have, I recommend you read http://alistapart.com/.
This is a wonderful study of successful horizontal navigations! Thank you Smashing!
iddaa
October 29th, 2008 5:11 amOk, so how about the differences between CSS1 and CSS2
webtechnepal
November 6th, 2008 1:32 amGreat lists for css menus. Thank you so much.
coolerio
November 20th, 2008 3:59 amyour site is so cooooooool, u r A Mazing
chesco
November 23rd, 2008 8:08 amGreat work!