30 Free CSS Based Navigation Menus

* This post is regularly updated. *
After 20 Popular CSS Online Tools and Generators, this is a new full list of CSS based navigation menus collection, it includes 30 various styles of navigation menus, vertical menus, Javascript powered menus and tab menus. Navigation menus is one of important elements for web design. SmashingMagazine has already published a great post to showcase all modern and beautiful CSS based styling menus, check it out here to see what other expert designers did. And below is the list of usable and free CSS menu techniques and resources that you can use for your blogs or websites. Probably some of them you have already seen before, but it is an round-up and can be your further reference. Cheers.

CSS Based Navigation Menus

Tabbed Navigation Using CSS

SimpleBits Mini-Tab Shapes – 4 different styles use a single, small gif for hovering and active tabs.

2 Level Menu – really beauty hover effect menu, unique and special. Recommended!

Exploding-boy CSS Tabs Menus – list of various style free tabs menu created by designer Christopher Ware.

CSS Based Navigation

CSS Menu with Slider – need two Javascripts for the moving slider. Simple and elegant.

Smaug Hover Menu

Drop Down Llama Menu – cool pink hover effect.

Inline Mini Tabs – if you like Simplebits Mini-Tabs, it is another choice.

Pure CSS horizontal Drop Down Menu – simple CSS dropdown sub-menus.

Hoverbox Menu – uses images replacement techniques.

Accessible Image-Tab Rollovers

Fancy Menu – the coolest movable hover menu, Recommended!

You can find more at here. There is no screen shot below to reduce the loading time. : )

• CSS Mini Tabs (the UN-tab, tab) – another 2 styles underline hover menus by Simplebits.
• Rollover CSS Image Menu – clean and elegant hover menu.
• Artists drop-down validating menu – CSS drop down menu with background images.
• Menu using image replacement
• Navigation Matrix Reloaded
• CSS Library Horizontal CSS Menus – a bulk of CSS menu by DynamicDrive.
• 13styles.com – focus on CSS menu design and also offers free menus for download.
• 14 Free Vertical CSS Menus – designed by exploding-boy, simple and various styles.
• ADxMenu – 4 basic and useful menus with different style.
• CSSMenus by Solardreamstudios – a 4 level deep list in both horizontal and vertical layout modes.
• CSS only drop-down menu – 5 styles drop down menus with underlines.
• e-Lusion Vertical Menus – 9 simple vertical menus.
• Suckerfish Dropdowns – created by HtmlDog.
• CSS Dock Menu
• 8 Web Menus you just can’t miss
• Mini Slide Navigation – a simple slider menu.
• Deluxe CSS Dropdowns and Flyouts

Miscellaneous

Webber 2.0 Dock Menu – web2.0 style drop down menu with CSS and Javascript.
Kollermedia Tabmenu

Unraveled CSS Tabs
CSS Tabs with Submenus – designed by Adam Kalsey.
Tabtastic – one more tab menu here.

Online Menu Generators

Flyout Menu Builder – work at IE and Firefox, created by CSSPlay.
Menu Builder for JSCookMenu – simple and easy generator to create horizontal and vertical menus.

The two generators below i have already mentioned before at 20 Popular CSS Online Tools and Generators.

http://www.webmaster-toolkit.com/css-menu-generator.shtml
http://www.listulike.com/generator/ – create cross-browser list-based navigation bars.

Further Reading

Centered Tabs with CSS – talking about create a flexible, centered alternative to floated navigation lists by Ethan Marcotte.
CSS and Round Corners: Build Accessible Menu Tabs – tutorial for create rounded corner tab mens by Trenton Moss.
Drop-Down Menus, Horizontal Style – create visually appealing drop-downs by using structured HTML and simple CSS.
Horizontal and Vertical CSS Menu Tutorial