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.
SimpleBits - Mini-Tab Shapes

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

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.
CSS Menu with slider

Smaug Hover Menu

Drop Down Llama Menu – cool pink hover effect.
Drop Down Llama Menu

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

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

Hoverbox Menu – uses images replacement techniques.
Hoverbox Menu

Accessible Image-Tab Rollovers
Accessible Image-Tab Rollovers

Fancy Menu – the coolest movable hover menu, Recommended!
CSS+Javascript power - Fancy menu

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


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.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

20 thoughts on “30 Free CSS Based Navigation Menus

  1. Pingback: Kotisivujen tekeminen – css-navigaatio | Sanamanna t:mi

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>