Make your menus pretty with CSS
November 14, 2007
Time to replace your boring text-only site navigation with something more pleasing to the eye?
How about beautiful CSS-based tab-like navigation? With free customizable source code?
Here are a few nice resources for CSS navigation as well as my selection of cool menus and tools:
1.
A selection of ready-made CSS menus
All of these come with functioning previews and downloadable source code.
Click the preview image for a demo or the link to visit the download page.
Pure CSS Horizontal Menus with Images by WebDesignInfo - click here for preview
12+ Free CSS Menus by Exploding-Boy - click here for preview
Inverted Tabs @ DynamicDrive
Dolphin Menu @ 13Styles
Style #4 @ 13Styles
Mini Tab Shapes by SimpleBits - click here for preview
Float Mini Tabs by Alessandro - click here for preview
14 Free Vertical CSS Menus by Exploding-Boy - click here for preview
Advanced CSS Menu by WebDesignerWall - click here for preview
2 level horizontal navigation with images by Veerle - click here for preview
CSS Dock Menu (includes simple JavaScript) by NDesign-Studio - click here for preview
2.
CSS Navigation Resources
A collection of links to more CSS navigation:
Top 71 CSS Menus Navigation Tabs @ E-consultant
30 Free CSS Based Navigation Menus @ CSS Juice
Tabs and Pure CSS Menus @ Alvit.de
A Big Bunch of Various CSS Menus @ CSS Play
3.
CSS Menu Generators
You can also create nice looking CSS navigation using online/software generators. Here are a few (free!) generators I like:
CSS Tab Designer by Overzone
CSS Menu Generator @ Webmaster Toolkit
CSSMenuMaker.com @ CSS Menu Maker
List-O-Matic @ Accessify (inspired by Listamatic)
4.
TUTORIALS
These tutorials will provide you with an in-depth view of techniques used for creating CSS-based navigation and help you understand how it all functions:
Nifty Navigation Using CSS - @ SitePoint
Sliding Door Technique @ AListApart
SuckerFish Dropdowns @ AListApart
CSS Express Dropdown Menus @ PVII
If you have any suggestions, please let me know by posting comments. Enjoy 
Entry Filed under: CSS, Useful Links, User friendly web design, Web Design, Website tips. .
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed