[Update Dec. 2015] Please note that the below-presented examples are heavily outdated. If you look for up-to-date navigation design techniques, please continue reading on Marco Hengstenberg's Designing Smashing's Mobile Navigation, David Bushell's Responsive Off-Canvas Navigation, Viljami Salminen's Responsive Nav Plugin, or check out or our latest articles on designing a modern, lightweight and responsive navigation. (Ed.)
Navigation menus have to be intuitive, precise and easy-to-use. One simple, fundamental principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, the 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 
Change.org 

N.Design Studio | Design & Blog 

Good Creative - Web and Graphic Design 
MacRabbit - Welcome 

Joyent: Introducing Joyent 

CSS Vault » The Web's CSS Site 

notiam.com 

Jamie Huskisson: Full time UK PHP freelance developer 

Web design, development and consultancy from Ottawa, Canada - Snook.ca 

BREAKER DESIGN 

Jen Gordon 

Tulumarka 

Ars Technica 

CSS Beauty | CSS Design, News, Jobs, Community, Web Standards 

Digg / Technology 

Triple Crown Customer Service 

microformats 

Badboy.ro 

GetMenus.ca 

Wedding Extravaganza 2007 - A Perfect Marriage 

Job Pile - Aggregating the Best Job Boards on the Web - Artypapers 

Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland 

Listal - List the stuff you love! Movies, TV, music, games and books 

folietto 

Tony Yoo - Online Showcase (version2) 

Digital Web Magazine 

Denbighshire Supporting Business 

Pulmad, peod, lillesalong... - Annilill Peoteenindus 

ExpressionEngine - Publish Your Universe! 

coda.coza 

purevolume™ | We're Listening To You 

EGOLOUNGE *Büro für digitales Design 

Merix - Internet Technologies 

Bartelme Design | Showroom 

Luis Alarcón, Blog 

CSS3 . info - Everything you need to know about CSS3 

nclud™ a creative web design agency 

Convan Design - Howdy 

ExpressionEngine - Publish Your Universe! 

Silverpoint: Web Solutions for Schools 

Jambor-ee - Celebrating ExpressionEngine 

far from fearless 

Scribd - Home 

Erika Greco - Blog 


Welcome to Buzz — Buzz Recruitment 

Michal Zapoměl - český vlasový design | czech hair design 

Onlinecenter Upload 

M122Arts Mixed Media and Technology // oo*o 
KazanShops.Ru 

Stone inc. - Aménagements Paysager, Pavés. 

Pixellogo 

AUSMAG - das Australien Work & Travel Portal 

— Comments 0