108 Free CSS Menu
Website navigation menu is one of the most important elements of a web designs. A content-Rich website without usable navigation will be useless, and maybe these can increase the number of bounce rate, and it’s really bad.
See Also: 50+ Great Examples of Mega Menus
bounce rate is the percentage of visitors who enter the site and “bounce” (leave the site) rather than continue viewing other pages within the same site {Wikipedia}.
There are a lots of smart ways to reduce high bounce rate percentage of your website, one of them is improving user interactions with a good website navigation design.
Website menu need to be simple, with a good designed menu, it will attract the user to explore your website; more pageview and increase average time on page.
There are many tutorials available on internet about how to create superb navigation menu design, and it’s free. You can try to create your very own vertical mega drop down menu like on eBay :). And here is 108 Tutorial or free CSS (Cascading Style Sheets) Menu Designs that can help you to design your website navigation menus more betters.
Update; 04/05/2016
With the popular trend of mobile layout; a website navigation must be also adaptive and mobile friendly to all screen resolutions and type of mobile device.
There are a lots of useful responsive menu both in the source codes and tutorials form, so we try to update the list of this CSS menu with several responsive navigation for your references, you can also get some additional responsive menu design responsive here.
Mega Main Menu
Responsive and Mega menu by Arjun Amgain
Responsive and Mega menu by Arjun Amgain
Mega Main Menu
Mega Main Menu are versatile wordpress menu plugins that you can use to create awesome navigation design, you can create mega menu, dropdowns, sticky menu with corner site logo.
This plugin is very easy to use even you don’t have coding experiences. You change the menu color with flat style, gradients and images. All options are easy to change from your admin dashboard.
Jolly
Jolly
Jolly is beautiful bootstrap mega menu that compatible with all mobile devices and modern web browsers.
Responsive Menus
A Responsive Menu – Source
A Responsive Menu
Retina Responsive Menu – Source
Retina Responsive Menu
The world’s simplest responsive menu – Source
The world’s simplest responsive menu
MDF Bootstrap Responsive Mega Menu – Source
MDF Bootstrap Responsive Mega Menu
Drop Down Menus
1. Slide Down Box Menu with jQuery and CSS3 – Source
Slide Down Box Menu with jQuery and CSS3
2. Hover Fill – Source
Hover Fill – Drop Down CSS Menus
3. CSS3 Dropdown Menu – Source
CSS3 Dropdown Menu – Drop Down CSS Menus
4. The Menu menu by Stu Nicholls: CSS expanding menu – Source
The Menu menu by Stu Nicholls – Drop Down CSS Menus
5. jQuery Menu: Dropdown, iPod Style and Flyout menus – Source
jQuery Menu: Dropdown, iPod Style and Flyout menus
6. White Smoke Animated jQuery Menu Style – Source
White Smoke Animated jQuery Menu Style
7. Pointer Arrow Drop Down Menus – Source
Pointer Arrow – Drop Down CSS Menus
8. CSS menu tutorial: Vimeo-like Menu – Source
Vimeo-like Menu – Drop Down CSS Menus
9. Sexy Drop Down Menu with jQuery and CSS – Source
Sexy Drop Down Menu with jQuery and CSS
10. 4 level deep CSS menu system – Source
4 level deep CSS menu system – Drop Down CSS Menus
11. Rounded Subs: free navigation menus – Source
Rounded Subs – Drop Down CSS Menus
12. Cool CSS-based drop-down menu – Source
Cool CSS-based drop-down menu
13. Match Widths Drop Down Menus –Source
Match Widths – Drop Down CSS Menus
14. Drop-down Nav Menu with HTML5, CSS3 and jQuery – Source
Drop-down Nav Menu with HTML5, CSS3 and jQuery
15. Gradient Hover: drop down navigation menus – Source
Gradient Hover – Drop Down CSS Menus
16. Full Gradient Bar – Source
Full Gradient Bar – Drop Down CSS Menus
17. Collapsing Site Navigation with jQuery – Source
Collapsing Site Navigation with jQuery – Drop Down CSS Menus
18. Basic Template Drop Down Menus: CSS tree menu – Source
Basic Template – Drop Down CSS Menus
19. Adobe (advanced) Drop Down Menus – Source
Adobe (advanced) – Drop Down CSS Menus
20. Massive Blue Drop Down – Source
Massive Blue Drop Down – Drop Down CSS Menus
21. Simple Vertical Menu Digg-like using CSS and Javascript – Source
Simple Vertical Menu Digg-like using CSS and Javascript
22. Sunrise Gloss Drop Down Menus – Source
Sunrise Gloss – Drop Down CSS Menus
23. Flickr like horizontal menu – Source
Flickr like horizontal menu – Drop Down CSS Menus
24. Blue Center Drop Bar – Source
Blue Center Drop Bar – Drop Down CSS Menus
25. Large jQuery Drop Down Menu Style – Source
Large jQuery Drop Down Menu Style
26. jQuery Drop Down Menu Style – Source
27. Blue Tabbed drop down navigation menus – Source
Blue Tabbed Drop Down CSS Menus
28. Blue Dawn Drop Down – Source
Blue Dawn Drop Down Menus
29. Chrome CSS Drop Down Menu – Source
Chrome CSS Drop Down Menu
Excellent collection, very inspiring! I think the mega drop down menu is my favorite 🙂
super collection………………….
I’ve just created this mega drop down menu style using drupal module http://www.victheme.com/product/drupal-mega-menu-module
hey thanks for this wonderful list it is very useful for me..
nice collection
keep it up
Awesome collection !!
hats off..
I love this site..
ithink ths sud rock..
in the gallaxy of internet..
cool collection we all luv it//
thanks buddy
Congrats….
This is the Best collection i’ve ever seen online.
Keep up the Good work Ginva.com
great collection of menu files useful for website designers
thanks
Hey man,this is really a cool collection.Thank you so much for your nice effort.keep doing.
BTW….do you have any plan about making slideshow collection??
great collection of menu files useful for website designers
thanks
Thanks for share..
not some of the menu have been copied but many of the menu’s have been copied from popular authors website….that not genuine…author..!!
Nice list of nav menus. I think text based css navigation is better for SEO.
Nice Collections…..Thanx 4 Sharing…………..
hi
menu no.14 is not working properly on IE9.
please consider this issue and do the required.
woooooooooooow mind blowing..confused which one to use each one of them is awesome here
Its very useful for me and all.
Drop Down Menu looks smart.
Looks great on Mac in Firefox, Safari and Chrome.
On the PC looks great in Firefox and Chrome. No gradients in IE (v8) or Safari?
Any ideas?
fantastic compilation – thanks for some super mega menus
thanks you verry much
Hi, Thanks for sharing. Amazing batch of super menu’s and now you don’t need to work hard to make different images for menu.
demo and download link all not found,…
:'(
thank you for your best staff
Hi,
Excelent article and menu colection.
very useful, free and with source code. It helped me to learn from it.
I added this page to favorite.
Thank you.
wonderful collections of menus.
you team did superb job nice……..
that help many people to make I.T field superb and also help for student to learn like me.
thanks………..
These are incredible – thank you. It’s high time I replaced the text links in my sites menus -_-. Thanks!
nice works and thanks for it…
wonderful collections of menus. Thanks for sharing!
great collection. gave been searching these navigation to implement my new joomla based web site. Thanks.
Really superb site. thank u for give a this collection
It is very good , Thank you very much
Thanks for this, I was just looking for a drop down menu and found best infos here.
Thanks for sharing, I just looking for mega drop down menu and found more infos here.
graciasssssssss
this is bery nice collection thanks ginava.
Really super collections. thank u.
this is biggest collection of CSS menu Designs.
cool yoo i like it
Very nice!!!!!!!!!!!!!!!!!!!111
Any CSS box as table menu ?
excellent.,.,.,.,.,thank
hatur nuhun nya.,.,.,hebat lah
It is wonderful help on CSS Menu, Thanks for such as job
excellent … thanks for sharing this…really helpful..:):)
thnksssssssssssssssssssssssssss
This the largest collection of the Website menu in this website. This types of collection i am looking for. This is helpfull for new Website developer.
Thank you so much