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

You guys never stop amazing me :)

Smashing is a name that fit you .

where is the digg button , need to digg this .

Great work .

Keep it up !

it would be nice if we also had access to the source of those designs .

It strikes me as mostly design variations on the same theme.

For true originality you could have restricted this post to just one link :

Link [www.cssplay.co.uk]

Chaaban, they got banned from Digg. Read their “8 Things You Should Know About Smashing Magazine” post.

is it my browser/computer or is the N.Design nav bar very laggy?

Very nice to see these great solutions.. but was there are reason for not putting in any vertikal CSS menu’s?

I don’t see anything attractive, but thanks for the set.

Link [www.digg.com]

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

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.

@ Roy

There is such a thing as a css image rollover, I use one on my as yet unfinished site redesign.

Check out Link [eileentognini.com] It’s different than the two dozen tabbed horizontal bars.

the point of these is to show examples, not to steal the examples. Those sites are not affiliated with smashing magazine, this article is not (IMO) meant for you to rip their css.

Joost Money…

Not everyone who views source code steals it…

Some of us use it to learn from…

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?

Maybe this site gives you some inspiriation too.

Nice Navigation: Link [www.favouritz.com]

Hey. You forgot to mention ‘ExpressionEngine - Publish Your Universe!’

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.

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

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?

@ Jen Simmons: That’s just mystery-meat navigation. Doesn’t score too well in terms of accessibility.

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

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.

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.

great work…!!!

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.

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 :)

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.

is it my browser/computer or is the N.Design nav bar very laggy?

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.

There have been quite a few css navigation menu round-ups lately but you’ve again managed to list some of the best. Thanks!

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.

“PSS”? I think you mean PPS.

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?

check out these menus too: Link [www.13styles.com]

Another tabbed one I stumbed across: Link [www.brusheezy.com]

这些都是导航之精品！

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

[…] smashingmagazine best user friendly navigation and solutions […]

“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”.

what about this menu: Link [www.bnet.com] Is it nice, isn’t it?

Nice to see but isn’t most of it the same?

I must say, this is a great list!

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.

Brilliant blog, nice to see small round-up on the menus. I think though the web 2.0 layout structures (and menu´s) are getting bit boring for the normal user, with that said look at Link [www.nebonmedia.com]

Uh, ExpressionEngine is in there twice…

The best collection I’ve ever see, thank you.

great list - very useful - I’m sure I’ll be referring to this list many times!

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

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.

gerat menu works. i will select one of them and try as soon as possible.

Realy great work…!!!
Thank you very much.

It’s cool! How i can use menu like Triple Crown Customer Service in my Link [www.blogflux.net]?. Help me please.

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.

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.

Omg.
This was what I was looking for.
Really Great.

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

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

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

Great design and menu solutions, though it is very simple to make css list menus which i guess these menus are….

Link [www.xhtml.gr] is also a validated website where i share my experiences in Link [www.michaelpersson.com]

My favorite… MacRabbit!

Thank you for this great list! My personal favorite from all above is Tony Yoo - others are mostly just too plain.

Excellent Article! Very helpfull and informative

Thank you for this great

Nice collection
Thanks!

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.

I don’t see anything attractive for my site filipinafianceevisa.com but thanks for the set.

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 ;)

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

I have few queries can I know where can I post the question?

Great resource for css menus.

thanks

Nice list!

smashing magazine! a really great resource :) // Michael

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.

Keep rocking the scene!

great list - very useful - I’m sure I’ll be referring to this list many times!

ur collections are really good.
but threr r no vertical menus???????///

Another good list, but a lot of those are pretty bland. Still, y’know?

2 times Expression Engine. Seems you like it, hmm? ;)

check out the menu generator at Link [bellspace.net] it includes vertical/horizontal support and keyboard-based navigation

how are you finding the larger CSS menus affecting SEO ? I have found i really causes problems with rankings if you menu is to large.

for example at my Link [www.thephonenetwork.co.uk] site i really had to cut it down

Great source of links! Thanks! I’ve found another website that contains quite a few different website navigitaion css tutorials.
Link [css.maxdesign.com.au]

i will use one soon on my page tekstomania

谁知道我这些样式,在那里能够下载到.给用用qq:409842590

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.