Loading ...Killer CSS Navigation: Everything You Need to Design Sweet CSS Menus
Posted by Faisal
When you’re looking for a clean and simple navigation menu, CSS is the way to go. Aside from being easy-to-use, CSS menus are also pretty lightweight compared to their flash/javascript counterparts (not to mention much easier to set up and customize). We’ve got exactly what you need to build your entire CSS-based navigation. Be sure check out our article on color psychology when deciding on your navigation colors.
Motivational Examples
We’ve discovered some great galleries of CSS navigation menus to give your creative side a jumpstart.
- Vitaly Friedman’s CSS Showcase - Lots of examples showing what you can do with CSS navigation.
- Collection of Web 2.0 Navigation Menus - Massive list of sites that use tabbed navigation.
- CSS-Based Navigation Menus: Modern Solutions - Smashing Magazine a list of “beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.”
CSS Navigation Tutorials
These here are some of the best tutorials for creating unique (but still user-friendly) CSS menus. They’re all easy to follow; you can pretty much create your whole navigation menu from just a few simple elements.
- CSS only menus - This is a HUGE list of different CSS menu types and tutorials.
- Horizontal and Vertical CSS Menu Tutorial - Check this out for some CSS popout menus.
- Navigation Matrix Reloaded - Create a stylish navigation using just one image.
- CSS Step Menu - Cody Lindley shows you how to make a cool step (aka wizard) menu.
- Pure CSS Popups - Create static-text popups for your nav menu with CSS!
- How To Center a Tabbed Horizontal CSS Menu - Want your CSS menu centered?
- Listamatic - Great tutorials on how to create CSS menus from lists.
CSS Navigation Templates and Generators
If you’re in need of quick, no-hassle navigation, take a look at these hot templates and generators; they’re all pretty easily customized, so yours won’t end up being a clone.
- 13styles.com - 13 different CSS menus for you to download. Most of them are free.
- CSS Menu Generator - A simple generator that creates left-side navigations menus. Just put in your colors and titles and it’s done!
- 8 Web Menus You Just Can’t Miss - Download 8 cool CSS menus (2 of them also use mootools, though!)
- Explodingboy gives you 37 free CSS menus to download:
- 14 Free Vertical CSS Menus
- Free CSS Navigation Menu Designs
- More Free CSS Navigation Menu Designs - Free Menu Designs - 9 free vertical block menu designs.
Like this post? Stay up to date by Subscribing to our Full RSS Feeds
Brian - August 8th, 2007
I didnt get a chance to look through everything, but i bookmarked it. This has to be like every css menu ill ever need
ptamaro - August 15th, 2007
Wow, thanks again for another batch of juicy bits!
Design for MySpace - August 21st, 2007
CSS navigation proved as great help for my presentation in my office
Lance - September 26th, 2007
Wow…nice stuff. ‘Still trying to get my arms around CSS and CSS navigation, but your efforts are well-appreciated. From an old-school FrontPage idiot, this really opens up my eyes to nice, clean design. A LOT to learn, but this is a great resource! Thanks and keep up the great work!
toys - July 30th, 2008
Some really nice menu options there. I think I’ll need to bookmark this post and refer to it a bit later when I start a new website. Some of those have inspired me with some interesting ideas – I’ll definitely be using the multiple tabs one, I think. Might just fiddle a little with the colour– I’m thinking of something black.