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

Comments

  1. By Stefan

  2. By mayank

  3. By Dileep

  4. By hendoko