October 29th, 2009

50 Cool CSS Menus, Free Source Codes + Tutorials

If you’re looking for a nice menu for your web design or blog, this is a list of beautiful and cool CSS menus.

Some menus have special effect with jQuery, javascript, or Mootool that make these menus have more interest such as slide menu, fading effect, cool animated and more.

You can download and use these CSS menus for free and some have tutorials for you to redesign, create, or modify the code by yourself.


1. Animated Navigation with CSS & jQuery

Animated Navigation with CSS & jQuery
View Demo


2. Color Fading Menu with jQuery

View Demo | Download



3. Apple Style Menu

Apple Style Menu
View View Demo | Download


4. Horizontal Subnav with CSS

Horizontal Subnav with CSS
View Demo


5. Advance Vista Styled CSS Menu

Advance Vista Styled CSS Menu
View Demo | Download


6. Garage Door Style Menu

Garage Door Style Menu
View Demo | Download


7. VISTA style toolbar with CSS

VISTA style toolbar with CSS
View Demo | Download


8. Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS
View Demo


9. CSS Vertical Navigation with Teaser

CSS Vertical Navigation with Teaser
View Demo


10. CSS Tabbed Menu

CSS Tabbed Menu
View Demo


11. "Mootools Homepage" Inspired Navigation Effect Using jQuery

View Demo | Download


12. JavaScript Dropdown Menu with Multi Levels

JavaScript Dropdown Menu with Multi Levels
View Demo | Download



13. Cool Animated Navigation with CSS and jQuery

Cool Animated Navigation with CSS and jQuery
View Demo | Download


14. Digg-like navigation bar using CSS

Digg-like navigation bar using CSS
View Demo | Download


15. Animated Menus Using jQuery

Animated Menus Using jQuery
View Demo | Download PSD File


16. Animate Content with jQuery

Animate Content with jQuery
View Demo | Download


17. Perfect multi-level navigation bar with jQuery

Perfect multi-level navigation bar with jQuery
View Demo | Download Source Code


18. Animated Tabbed Content With jQuery

Animated Tabbed Content With jQuery
View Demo | Download



19. Floating HTML Menu Using jQuery and CSS

Floating HTML Menu Using jQuery and CSS
View Demo | Download


20.Smooth Animated Menu with jQuery

Smooth Animated Menu with jQuery
View Demo | Download


21. Advanced CSS Menu Trick

Advanced CSS Menu Trick
View Demo


22. Glossy Horizontal Menu

Glossy Horizontal Menu
View Demo


23. Vimeo Like Top Navigation

Vimeo Like Top Navigation
View Demo | Download


24. Tabbed search bar

Tabbed search bar
View Demo | Download


25. Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery
View Demo | Download


26. iPod Style Menu

iPod Style Menu
View Demo | Download


27. LavaLamp Menu

LavaLamp Menu
View Demo | Download


28. Glossy Vertical Menu

Glossy Vertical Menu
View Demo


29. Corp Blue CSS Menu

Corp Blue CSS Menu
View Demo


30. Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

View Demo | Download


31. 13 Style CSS Menu

13 Style CSS Menu

#Demo 1 | #Demo 2 | #Demo 3


32. “Active” State in CSS Navigations

View Demo | Download PSD file


33. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 image

View Demo | Download


34. Image Fade Revisited

Image Fade Revisited

View Demo


35. Coda Slider Effect

Coda Slider Effect

View Demo


36. Clean Tab Bar Digg-like using CSS

Clean Tab Bar Digg-like using CSS

Download


37. Beautiful, simple, horizontal CSS menu

Beautiful, simple, horizontal CSS menu

Demo On Page


38. jGlideMenu

jGlideMenu

View Demo | Download


39. Sexy Sliding JavaScript Side Bar Menu Using Mootools

Sexy Sliding JavaScript Side Bar Menu Using Mootools

View Demo | Download


40. Professional horizontal series [17 menus]

Professional horizontal series [17 menus]

Demo and download links are on page


41. Simple Vertical Menu

Simple Vertical Menu

View Demo


42. Image Menu

Image Menu

View Demo | Download


43. Overlapping tabbed navigation in CSS

Overlapping tabbed navigation in CSS

View Demo | Download


44. Simple CSS Menu

Simple CSS Menu

View Demo


45. Advanced CSS Menu Using the Hover and Position Properties

Advanced CSS Menu Using the Hover and Position Properties

View Demo | Download


46. Sliding Jquery Menu

Sliding Jquery Menu

View Demo | Download


47. Dropdown with Flyout CSS Menus

Dropdown with Flyout CSS Menus
View Demo (on page) | Download


48. Organic Tabs

Organic Tabs

View Demo | Download


49. CSS Sprite Menu

CSS Sprite Menu

View Demo | Download


50. AutoSprites

AutoSprites

View Demo | Download



Related Posts

12 Responses to “50 Cool CSS Menus, Free Source Codes + Tutorials”

Leave a Reply