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
Bob Wander
November 24th, 2008 2:02 amI 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.
Dmitry
December 6th, 2008 6:07 amI like Joyent: Introducing Joyent
Anna
January 9th, 2009 4:05 amWow! it’s great. Thank you! I try to use Welcome to Buzz — Buzz Recruitment menu in my blog.
Marlon
January 25th, 2009 7:51 amI 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.
Thendenze
February 4th, 2009 7:36 amWonderfull list
Erik Spaan
February 5th, 2009 12:47 amHi,
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 :-)
Jono
February 5th, 2009 5:13 amHi
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
Alex
March 1st, 2009 2:24 pmGreat work..but some of the menues are really boring…..
Hassan Agha
April 2nd, 2009 11:06 pmThanks a million buddy, Excellent compilation.
Keep up the good work.
andi
May 13th, 2009 2:53 pmthe wedding extravaganza 2009 web site looks like a birth control product.
lifetarget
June 9th, 2009 11:04 pmvery niceeeeeeeeee
Tejendra Shandilya
June 23rd, 2009 8:55 pmThat is g8.
Jamie
July 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.
saadcreative
August 24th, 2009 8:48 pmthis stuff is really good. i did not know that.
venkatesh
August 29th, 2009 7:31 amIt is very useful for printscreen works in webdesign,,,:)
ljcrabs
September 24th, 2009 9:24 pmAt 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.
satyA
October 8th, 2009 4:46 amThat’s GooD……….
ViRu
October 8th, 2009 4:47 amWow What an ideA sir G…….
KntL
November 9th, 2009 1:36 pmhi, this article as others from SmashingMagazine is perfect. it is very helpful to see all css navigation alternatives in one place.
thank you…
Attitude Design Portfolio
February 3rd, 2010 2:46 amBrilliant – thanks for the inspiration!
xyz
March 4th, 2010 9:54 pmGreat Navigation
suresh
June 13th, 2010 11:58 pmgreate effect of menu create to be different think but source code is not be explain i’cont use this menu
Toldi Gábor
July 4th, 2010 6:42 amI have a CSS drop-line menu (tableless, without JavaScript).
But, encountered a problem:
– The text does not appear in the middle of the menu (the menuitems singleline, multiline – varied)
How to solve this problem?
Dropline menu
#navigation MENU {
padding: 0px;
margin: 0px 0px 0px 0px;
}
#navigation MENU LI {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#navigation MENU LI A {
width: 98px;
height: 54px;
display: block;
text-decoration: none;
text-align: center;
background: url(http://lh6.ggpht.com/_W2DEFOtz8LQ/TCrNcx6osDI/AAAAAAAAADg/pgBiHgdnpmA/mainmenu.gif);
}
#navigation MENU LI A:hover { background: url(http://lh3.ggpht.com/_W2DEFOtz8LQ/TCrNdDTw1eI/AAAAAAAAADo/yA10-qfxNr4/activemenu.gif); }
#navigation MENU LI:hover MENU { display:block; }
#navigation MENU MENU {
position: absolute;
top: 154px;
display:none;
width:auto;
height:auto;
}
#navigation MENU MENU LI{
float: left;
width: 98px;
height: 54px;
}
#navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com/_W2DEFOtz8LQ/TCrNdMPZQiI/AAAAAAAAADk/YBwpyylogvc/submenu.gif) }
#header { width: 800; height: 200; background-color: paleturquoise; }
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Cím szerinti bontás
Dátum szerinti bontás
Kategóriák szerinti bontás
Keresztény írások
Áhitatok minden napra
Könyvek novellák
Versek idézetek
Keresztény linkek
Bibliával kapcsolatos
Gyülekeztek honlapjai
Keresztény oldalak
Multimédiás szolgáltatások
Filmek videók
Legyen Ön is misszionárius
Webalbum
Keresztény képernyővédő
Támogatás adományozás
Fontos tudnivalok
Adminisztráció
Toldi Gábor
July 4th, 2010 6:44 amI have a CSS drop-line menu (tableless, without JavaScript).
But, encountered a problem:
– The text does not appear in the middle of the menu (the menuitems singleline, multiline – varied)
How to solve this problem?
Dropline menu
#navigation MENU {
padding: 0px;
margin: 0px 0px 0px 0px;
}
#navigation MENU LI {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#navigation MENU LI A {
width: 98px;
height: 54px;
display: block;
text-decoration: none;
text-align: center;
background: url(http://lh6.ggpht.com/_W2DEFOtz8LQ/TCrNcx6osDI/AAAAAAAAADg/pgBiHgdnpmA/mainmenu.gif);
}
#navigation MENU LI A:hover { background: url(http://lh3.ggpht.com/_W2DEFOtz8LQ/TCrNdDTw1eI/AAAAAAAAADo/yA10-qfxNr4/activemenu.gif); }
#navigation MENU LI:hover MENU { display:block; }
#navigation MENU MENU {
position: absolute;
top: 154px;
display:none;
width:auto;
height:auto;
}
#navigation MENU MENU LI{
float: left;
width: 98px;
height: 54px;
}
#navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com/_W2DEFOtz8LQ/TCrNdMPZQiI/AAAAAAAAADk/YBwpyylogvc/submenu.gif) }
#header { width: 800; height: 200; background-color: paleturquoise; }
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Header Logo
Mark
August 3rd, 2011 8:18 amToldi, for Vitaly …
Issue is code containment.
One kind of container is logical:
#grandparent.parent.child
Another CSS container species is physical (script embedments):
#navigation missingmenubox menu menucontainers
The CSS script genus actually carries three species, the aforementioned logical and embed selectors, as well as property name toys.
Inadequate species containment seems frequently to result in designers wish lushing silly toys. I defer to Stu Nichol’s collective in Merry Olde, wherein gaffing round between species and toys is always on the edge (but not quite that Maryland bunch) — har-har.
Count your hooks and weights. We love countdowns.
Misel
August 16th, 2011 10:45 amGreat css styles etc…i really love all i checked also this from pixellogo and it is very nice i really love those sites as: logophoria.com and there is new website designfantasy.net they say they will be huge so maybe we will see some of their stuff here or somewhere else. Cheers
koncocoro
March 15th, 2012 3:16 pmthanx a lot :) I’m seeking drop-down menus…