Pressplaymedia’s Blog

Archive for November 14th, 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:

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

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 @

A Big Bunch of Various CSS Menus @ CSS Play

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 @ CSS Menu Maker

List-O-Matic @ Accessify (inspired by Listamatic)


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 🙂