[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
