Smashing Magazine - we smash you with the information that will make your life easier. really.

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

Great work .

Keep it up !

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

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

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

http://www.digg.com/design/CSS_Based_Navigation_Menus_Modern_Solutions

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.

Check out this site’s all-css nav. It’s different than the two dozen tabbed horizontal bars.

Joost Money…

Not everyone who views source code steals it…

Some of us use it to learn from…

Maybe this site gives you some inspiriation too.

Nice Navigation: http://www.favouritz.com/

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.

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?

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

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.

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.

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.

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.

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.

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?

Another tabbed one I stumbed across: http://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

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

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

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.

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

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

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

It’s cool! How i can use menu like Triple Crown Customer Service in my blog?. Help me please.

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.

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

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

My favorite… MacRabbit!

Excellent Article! Very helpfull and informative

Nice collection
Thanks!

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

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

Great resource for css menus.

thanks

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

Keep rocking the scene!

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

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

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/

But there isn’t a menu template with submenu?

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

thanks a lot…

colourful!
wonderful!
powerful!
beautiful!

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

bangsaaaat keren mampus !!! musti gw ambil nih !

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

Ok, so how about the differences between CSS1 and CSS2

your site is so cooooooool, u r A Mazing

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.

Wow! it’s great. Thank you! I try to use Welcome to Buzz — Buzz Recruitment menu in my blog.

Wonderfull list

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

Thanks a million buddy, Excellent compilation.
Keep up the good work.

very niceeeeeeeeee

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

It is very useful for printscreen works in webdesign,,,:)

That’s GooD……….

hi, this article as others from SmashingMagazine is perfect. it is very helpful to see all css navigation alternatives in one place.

thank you…