Smashing Magazine - we smash you with the information that will make your life easier. really.
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
- 119 Comments
- 1
- 2March 14th, 2007 9:56 pm
You guys never stop amazing me :)
Smashing is a name that fit you .
where is the digg button , need to digg this .
- 3March 14th, 2007 10:02 pm
Great work .
Keep it up !
it would be nice if we also had access to the source of those designs .
- 4March 14th, 2007 10:44 pm
It strikes me as mostly design variations on the same theme.
For true originality you could have restricted this post to just one link :
- 5March 14th, 2007 11:06 pm
Chaaban, they got banned from Digg. Read their “8 Things You Should Know About Smashing Magazine” post.
- 6March 14th, 2007 11:20 pm
is it my browser/computer or is the N.Design nav bar very laggy?
- 7March 15th, 2007 12:37 am
Very nice to see these great solutions.. but was there are reason for not putting in any vertikal CSS menu’s?
- 8March 15th, 2007 1:22 am
I don’t see anything attractive, but thanks for the set.
- 9
- 10March 15th, 2007 3:03 am
I’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
- 11March 15th, 2007 3:37 am
To 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. - 12March 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.
- 13March 15th, 2007 4:00 am
Check out this site’s all-css nav. It’s different than the two dozen tabbed horizontal bars.
- 15March 15th, 2007 4:23 am
Joost Money…
Not everyone who views source code steals it…
Some of us use it to learn from…
- 16March 15th, 2007 4:29 am
These 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?
- 17March 15th, 2007 4:38 am
Maybe this site gives you some inspiriation too.
Nice Navigation: http://www.favouritz.com/
- 18March 15th, 2007 5:10 am
Hey. You forgot to mention ‘ExpressionEngine – Publish Your Universe!’
- 19March 15th, 2007 5:38 am
Designers/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.
- 20March 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.
- 21March 15th, 2007 5:43 am
Come 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?
- 22March 15th, 2007 6:23 am
@ Jen Simmons: That’s just mystery-meat navigation. Doesn’t score too well in terms of accessibility.
- 23March 15th, 2007 6:54 am
you 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 - 24March 15th, 2007 6:56 am
I 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.
- 25March 15th, 2007 7:14 am
The 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.
- 26March 15th, 2007 7:24 am
great work…!!!
- 27March 15th, 2007 8:04 am
YOU 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.
- 28March 15th, 2007 8:06 am
Thanks 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 :)
- 29March 15th, 2007 11:34 am
I 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.
- 30March 15th, 2007 1:09 pm
is it my browser/computer or is the N.Design nav bar very laggy?
- 31March 15th, 2007 2:52 pm
Now, 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.
- 32March 15th, 2007 7:38 pm
There have been quite a few css navigation menu round-ups lately but you’ve again managed to list some of the best. Thanks!
- 33March 15th, 2007 7:55 pm
Found 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.
- 34March 15th, 2007 9:49 pm
“PSS”? I think you mean PPS.
- 35March 15th, 2007 11:48 pm
why is this on digg.com? this sucks. where is the code?
who gives a crap about a bunch of screens and links to sites?
- 36
- 37
- 38March 16th, 2007 11:40 am
这些都是导航之精品!
- 39March 16th, 2007 5:23 pm
not 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
- 40March 16th, 2007 8:20 pm
[...] smashingmagazine best user friendly navigation and solutions [...]
- 41March 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”.
- 42March 17th, 2007 3:29 am
what about this menu: bnet.com Is it nice, isn’t it?
- 43March 18th, 2007 3:01 am
Nice to see but isn’t most of it the same?
- 44March 18th, 2007 7:02 am
I must say, this is a great list!
- 45March 19th, 2007 2:21 am
A 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.
- 46March 26th, 2007 12:53 pm
Uh, ExpressionEngine is in there twice…
- 47May 5th, 2007 8:45 am
The best collection I’ve ever see, thank you.
- 48May 22nd, 2007 12:34 pm
great list – very useful – I’m sure I’ll be referring to this list many times!
- 49May 22nd, 2007 2:30 pm
yo 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..
- 50May 25th, 2007 4:03 pm
I 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.
- 51June 8th, 2007 9:57 pm
gerat menu works. i will select one of them and try as soon as possible.
- 52June 21st, 2007 11:22 pm
Realy great work…!!!
Thank you very much. - 53July 22nd, 2007 5:14 pm
It’s cool! How i can use menu like Triple Crown Customer Service in my blog?. Help me please.
- 54July 23rd, 2007 3:40 pm
This 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.
- 55August 7th, 2007 3:23 am
What 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.
- 56August 9th, 2007 12:28 am
Omg.
This was what I was looking for.
Really Great. - 57August 10th, 2007 5:37 am
I 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 - 58August 20th, 2007 2:19 pm
it would be even better if there are like tutorials below each post showing how to do each :)
that would be some thing shakie smashing
- 59August 28th, 2007 1:39 am
I 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
- 60August 31st, 2007 4:13 pm
Great design and menu solutions, though it is very simple to make css list menus which i guess these menus are….
- 61September 12th, 2007 7:15 am
My favorite… MacRabbit!
- 62October 5th, 2007 4:23 am
Thank you for this great list! My personal favorite from all above is Tony Yoo – others are mostly just too plain.
- 63November 2nd, 2007 2:17 am
Excellent Article! Very helpfull and informative
- 64November 20th, 2007 7:48 pm
Thank you for this great
- 65November 29th, 2007 1:59 am
Nice collection
Thanks! - 66December 11th, 2007 1:39 am
Very 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.
- 67January 1st, 2008 4:13 pm
I don’t see anything attractive for my site filipinafianceevisa.com but thanks for the set.
- 68January 7th, 2008 4:03 pm
The 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 ;)
- 69February 3rd, 2008 12:19 pm
You 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
- 70February 5th, 2008 5:30 pm
I have few queries can I know where can I post the question?
- 71February 26th, 2008 2:02 am
Great resource for css menus.
thanks
- 72February 26th, 2008 10:24 am
Nice list!
- 73March 4th, 2008 12:49 am
smashing magazine! a really great resource :) // Michael
- 74March 5th, 2008 10:40 pm
From 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.
- 75March 7th, 2008 1:33 am
Keep rocking the scene!
- 76March 12th, 2008 8:45 pm
great list – very useful – I’m sure I’ll be referring to this list many times!
- 77March 20th, 2008 11:16 pm
ur collections are really good.
but threr r no vertical menus???????/// - 78April 3rd, 2008 6:20 pm
Another good list, but a lot of those are pretty bland. Still, y’know?
- 79April 15th, 2008 11:47 pm
2 times Expression Engine. Seems you like it, hmm? ;)
- 80April 18th, 2008 10:05 am
check out the menu generator at http://bellspace.net it includes vertical/horizontal support and keyboard-based navigation
- 81May 2nd, 2008 6:35 am
Great 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/ - 82May 9th, 2008 9:32 pm
Very 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.
- 83May 21st, 2008 9:06 am
But there isn’t a menu template with submenu?
- 84June 23rd, 2008 9:54 am
Awesome resources, great post.
- 85July 15th, 2008 9:39 am
Great 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
- 86August 26th, 2008 7:24 am
But all these menus possess images as background – It will be that of pra not to make a modern and pretty menu only with css?
- 87September 9th, 2008 1:29 pm
thanks a lot…
- 88
- 89September 12th, 2008 1:35 am
colourful!
wonderful!
powerful!
beautiful! - 90September 15th, 2008 12:55 am
nice menus ….
- 91September 16th, 2008 9:33 am
Web 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
- 92September 19th, 2008 1:18 am
very cool~~~
- 93October 4th, 2008 5:57 am
bangsaaaat keren mampus !!! musti gw ambil nih !
- 94October 17th, 2008 6:48 am
perfectly pure css effects…………thanks
- 95October 19th, 2008 7:02 am
Hello,
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
- 96October 28th, 2008 7:36 am
jeremy24, 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!
- 97October 29th, 2008 5:11 am
Ok, so how about the differences between CSS1 and CSS2
- 98November 6th, 2008 1:32 am
Great lists for css menus. Thank you so much.
- 99November 20th, 2008 3:59 am
your site is so cooooooool, u r A Mazing
- 100November 23rd, 2008 8:08 am
Great work!
- 101November 24th, 2008 2:02 am
I agree, some of these menus are inaccessible, what a load of rubbish, bad practice. All fluff and style. Very poor article, you ought to do better than this.
- 102December 6th, 2008 6:07 am
I like Joyent: Introducing Joyent
- 103January 9th, 2009 4:05 am
Wow! it’s great. Thank you! I try to use Welcome to Buzz — Buzz Recruitment menu in my blog.
- 104January 25th, 2009 7:51 am
I think post #45 hit it right on the head: you have to have menus that indicate what page you’re on. By all means, stay away from javascript – chews up load times and there may be compatibility issues.
- 105February 4th, 2009 7:36 am
Wonderfull list
- 106February 5th, 2009 12:47 am
Hi,
Stu Nicholls (cssplay.co.uk) has now also released a new website dedicated to css menus on
cssmenus.co.uk. A very nice collection of single level, dropdown, dropline and vertical menus.A nice collection of horizontal/vertical menus are also available from exploding boy:
http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/
http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/
http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/Just to let you know :-)
- 107February 5th, 2009 5:13 am
Hi
I read a couple of posts above and people were looking how to get the css for the menus, to do this use Firefox browser and get the free web developer plugin and that has a function to view the css of a site and then look for the styling of the menu.Jono
- 108
- 109April 2nd, 2009 11:06 pm
Thanks a million buddy, Excellent compilation.
Keep up the good work. - 110May 13th, 2009 2:53 pm
the wedding extravaganza 2009 web site looks like a birth control product.
- 111June 9th, 2009 11:04 pm
very niceeeeeeeeee
- 112June 23rd, 2009 8:55 pm
That is g8.
- 113July 28th, 2009 11:32 pm
@Roy Tomeij – They are modern. Evidently using JavaScript to create nice, functional and clean menus is ‘modern’. JavaScript is the big player in the whole ‘Web 2.0′ web development world.
Just sticking to CSS to create mediocre menus, interactions etc. is boring and not very creative.
I’ve seen it all before. People who refuse to follow the trends, and in the end stick too much emphasis on ‘accessibility’ and not enough on what is going to make them money. For example, I’m not too bothered if one of my javascript menus doesn’t work on a device which doesn’t support JavaScript!
Move with the trends, please.
- 114August 24th, 2009 8:48 pm
this stuff is really good. i did not know that.
- 115August 29th, 2009 7:31 am
It is very useful for printscreen works in webdesign,,,:)
- 116September 24th, 2009 9:24 pm
At least one of those examples uses a drop down menu, which are _not_ user friendly. They hide the links from the user and cause them to have to search for the links.
- 117October 8th, 2009 4:46 am
That’s GooD……….
- 118October 8th, 2009 4:47 am
Wow What an ideA sir G…….
- 119November 9th, 2009 1:36 pm
hi, this article as others from SmashingMagazine is perfect. it is very helpful to see all css navigation alternatives in one place.
thank you…
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- The Big Showcase Of Online T-Shirt Stores - http://bit.ly/5Tq8uA
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.























































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