Aug 23 2011

100 Great CSS Menu Tutorials

Advertisement

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.

Horizontal CSS Menu Tutorials

1. Advanced CSS Menu Trick

Advanced CSS Menu Trick

View Tutorial | Demo

2. Elegant Drop Menu with CSS Only

Elegant Drop Menu with CSS Only

View Tutorial | Demo

3. Bulletproof CSS Sliding Doors

Bulletproof CSS Sliding Doors

View Tutorial & Demo

4. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

View Tutorial | Demo

5. Create an Advanced CSS3 Menu – Version 2

Create an Advanced CSS3 Menu – Version 2

View Tutorial | Demo

6. Create a Slick Menu using CSS3

Create a Slick Menu using CSS3

View Tutorial | Demo

7. How to Make a Smooth Animated Menu with jQuery

How to Make a Smooth Animated Menu with jQuery

View Tutorial | Demo

8. How to Make a CSS Sprite Powered Menu

How to Make a CSS Sprite Powered Menu

View Tutorial

9. Simple jQuery Dropdowns

Simple jQuery Dropdowns

View Tutorial | Demo

10. Designing the Digg Header: How To & Download

Designing the Digg Header: How To & Download

View Tutorial | Demo

11. Dynamic Page / Replacing Content

Dynamic Page / Replacing Content

View Tutorial | Demo

12. Create a Fun Animated Navigation Menu With Pure CSS

Create a Fun Animated Navigation Menu With Pure CSS

View Tutorial | Demo

13. How-to: DropDown CSS Menu

How-to: DropDown CSS Menu

View Tutorial | Demo

14. Flexible CSS Menu

Flexible CSS Menu

View Tutorial & Demo

15. Creating a glassy non div navigation bar

Creating a glassy non div navigation bar

View Tutorial | Demo

16. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 image

View Tutorial | Demo

17. CSS UL LI – Horizontal CSS Menu

CSS UL LI - Horizontal CSS Menu

View Tutorial

18. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

View Tutorial | Demo

19. A Different Top Navigation

A Different Top Navigation

View Tutorial | Demo

20. Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

View Tutorial | Demo

21. Navigation Bar

Navigation Bar

View Tutorial & Demo

22. CSS: drop down menu tutorial

CSS: drop down menu tutorial

View Tutorial | Demo

23. RocketBar – A jQuery And CSS3 Persistent Navigation Menu

RocketBar – A jQuery And CSS3 Persistent Navigation Menu

View Tutorial | Demo

24. A Great CSS Horizontal Drop-Down Menu

A Great CSS Horizontal Drop-Down Menu

View Tutorial & Demo

25. Overlay Effect Menu with jQuery

Overlay Effect Menu with jQuery

View Tutorial | Demo

26. Grungy Random Rotation Menu with jQuery and CSS3

Grungy Random Rotation Menu with jQuery and CSS3

View Tutorial | Demo

27. Rocking and Rolling Rounded Menu with jQuery

Rocking and Rolling Rounded Menu with jQuery

View Tutorial | Demo

28. Slide Down Box Menu with jQuery and CSS3

Slide Down Box Menu with jQuery and CSS3

View Tutorial | Demo

29. Advanced CSS Menu

Advanced CSS Menu

View Tutorial | Demo

30. CSS3 Dropdown Menu

CSS3 Dropdown Menu

View Tutorial | Demo

31. How To Create A Simple Drop Down Menu With CSS3

How To Create A Simple Drop Down Menu With CSS3

View Tutorial | Demo

32. Pastel color menu with dynamic submenu using CSS

Pastel color menu with dynamic submenu using CSS

View Tutorial | Demo

33. Creating an Animated CSS3 Horizontal Menu

Creating an Animated CSS3 Horizontal Menu

View Tutorial | Demo

34. Tutorial to create a Beautiful, simple, horizontal CSS menu

Tutorial to create a Beautiful, simple, horizontal CSS menu

View Tutorial & Demo

35. CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It’s JavaScript Time

View Tutorial | Demo

36. Image Menu with Jquery

Image Menu with Jquery

View Tutorial | Demo

37. How to Code an Overlapping Tabbed Main Menu

How to Code an Overlapping Tabbed Main Menu

View Tutorial | Demo

38. Pure CSS Horizontal Menu

Pure CSS Horizontal Menu

View Tutorial | Demo

39. Pure CSS Menu With Infinite Sub Menus Tutorial

Pure CSS Menu With Infinite Sub Menus Tutorial

View Tutorial | Demo

40. Animated horizontal tabs

Animated horizontal tabs

View Tutorial & Demo

41. CSS Sprite Navigation Tutorial

CSS Sprite Navigation Tutorial

View Tutorial | Demo

42. Create your own drop down menu with nested submenus using CSS and a little JavaScript

Create your own drop down menu with nested submenus

View Tutorial | Demo

43. CSS Drop Down Menu Tutorial

CSS Drop Down Menu Tutorial

View Tutorial & Demo

44. Nicer Navigation with CSS Transitions

Nicer Navigation with CSS Transitions

View Tutorial | Demo

45. CSS Navigation Menus

CSS Navigation Menus

View Tutorial

46. Pure CSS Fish Eye Menu

Pure CSS Fish Eye Menu

View Tutorial | Demo

47. How to Create a CSS3 Tabbed Navigation

How to Create a CSS3 Tabbed Navigation

View Tutorial | Demo

48. Create an apple style menu and improve it via jQuery

Create an apple style menu and improve it via jQuery

View Tutorial | Demo

49. Create a multilevel Dropdown menu with CSS and improve it via jQuery

Create a multilevel Dropdown menu with CSS and improve it via jQuery

View Tutorial | Demo

50. Sweet tabbed navigation using CSS3

Sweet tabbed navigation using CSS3

View Tutorial | Demo

51. Create an Advanced CSS Menu Using the Hover and Position Properties

Create an Advanced CSS Menu Using the Hover and Position Properties

View Tutorial | Demo

52. Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS

View Tutorial | Demo

53. How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

View Tutorial | Demo

54. CSS Express Drop-Down Menus

CSS Express Drop-Down Menus

View Tutorial | Demo

55. Professional Dark CSS Menu

Professional Dark CSS Menu

View Tutorial | Demo

56. Creating a Simple yet Stylish CSS Jquery Menu

Creating a Simple yet Stylish CSS Jquery Menu

View Tutorial | Demo

57. jQuery Drop Line Tabs

jQuery Drop Line Tabs

View Tutorial & Demo

58. Animated Menus Using jQuery

Animated Menus Using jQuery

View Tutorial | Demo

59. Make a Mega Drop-Down Menu with jQuery

Make a Mega Drop-Down Menu with jQuery

View Tutorial | Demo

60. Animated Navigation with CSS & jQuery

Animated Navigation with CSS & jQuery

View Tutorial | Demo

61. Horizontal Subnav with CSS

Horizontal Subnav with CSS

View Tutorial | Demo

62. Mega Drop Down Menus w/ CSS & jQuery

Mega Drop Down Menus w/ CSS & jQuery

View Tutorial | Demo

63. CSS dropdown menu without javascripting or hacks

CSS dropdown menu without javascripting or hacks

View Tutorial & Demo

64. CSS Drop Down Navigation Tutorial

CSS Drop Down Navigation Tutorial

View Tutorial

65. Sleek Pointer Menu 2

Sleek Pointer Menu 2

View Tutorial & Demo

66. CSS Overlapping Tabs Menu

CSS Overlapping Tabs Menu

View Tutorial | Demo

67. Horizontal CSS Menu With Icons

Horizontal CSS Menu With Icons

View Tutorial | Demo

68. Creating a Multi-Level Dropdown Menu using CSS and jQuery

Creating a Multi-Level Dropdown Menu using CSS and jQuery

View Tutorial | Demo

69. Create The Fanciest Dropdown Menu You Ever Saw

Create The Fanciest Dropdown Menu You Ever Saw

View Tutorial | Demo

70. Create A Speaking Block Navigation Menu Using Pure CSS

Create A Speaking Block Navigation Menu Using Pure CSS

View Tutorial | Demo

71. Horizontal CSS List Menu

Horizontal CSS List Menu

View Tutorial | Demo

72. CSS3 dropdown menu

CSS3 dropdown menu

View Tutorial | Demo

73. Making a CSS3 Animated Menu

Making a CSS3 Animated Menu

View Tutorial | Demo

74. How To Create A Clean CSS3 Navigation Bar

How To Create A Clean CSS3 Navigation Bar

View Tutorial | Demo

75. How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

View Tutorial | Demo

Vertical CSS Menu Tutorials

76. CSS Pop-Out Menu Tutorial

CSS Pop-Out Menu Tutorial

Tutorial | Demo

77. CSS graphic menu with rollovers

CSS graphic menu with rollovers

Tutorial | Demo

78. Vertical CSS Menu With a ‘Behavior’ File

Vertical CSS Menu With a ‘Behavior’ File

Tutorial | Demo

79. Super Fantastic CSS Navigation Image Rollovers

Super Fantastic CSS Navigation Image Rollovers

Tutorial | Demo

80. Vertical Menu with Hover Effect using CSS

Vertical Menu with Hover Effect using CSS

Tutorial | Demo

81. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Tutorial | Demo

82. Simple CSS Vertical Menus

Simple CSS Vertical Menus

View Tutorial | Demo

83. Create a Social Media Sharing Menu Using CSS and jQuery

Create a Social Media Sharing Menu Using CSS and jQuery

Tutorial | Demo

84. CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

Tutorial | Demo

85. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Tutorial | Demo

86. Awesome Cufonized Fly-out Menu with jQuery and CSS3

Awesome Cufonized Fly-out Menu with jQuery and CSS3

Tutorial | Demo

87. Two CSS vertical menu with show/hide effects

Two CSS vertical menu with show/hide effects

Tutorial | Demo

88. Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery

Tutorial | Demo

89. Clean and Attractive jQuery Vertical Menu Tutorial

Clean and Attractive jQuery Vertical Menu Tutorial

Tutorial | Demo

90. Nested Side Bar Menu

Nested Side Bar Menu

Tutorial & Demo

91. CSS menus

CSS menus

Tutorial | Demo

92. Simple Vertical CSS Menu

Simple Vertical CSS Menu

Tutorial

93. Sliding Jquery Menu

Sliding Jquery Menu

Tutorial | Demo

94. Reinventing a Drop Down with CSS and jQuery

Reinventing a Drop Down with CSS and jQuery

Tutorial | Demo

95. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal Style

Tutorial | Demo

96. CSS Vertical Navigation with Teaser

CSS Vertical Navigation with Teaser

Tutorial | Demo

97. jQuery style menu with CSS3

jQuery style menu with CSS3

Tutorial | Demo

98. Green Vertical Navigation Menu

Green Vertical Navigation Menu

Tutorial | Demo

99. CSS: Sexy Vertical Popup Menu with CSS

CSS: Sexy Vertical Popup Menu with CSS

Tutorial | Demo

100. Uberlink CSS List Menus

Uberlink CSS List Menus

Tutorial | Demo

Overview

We hope you have enjoyed this list of CSS navigation menus and found something useful for your site (We made a point of including a mix of different menu styles: basic menus, flashy menus, menus which use jquery, menus that use pure CSS etc). If you know of any other great CSS menu tutorials, please feel free to share them in the comment area. :)

About the Author

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity and Social Media on his personal blog. He can also be found on Twitter: @KevinMuldoon.

Homepage

Twitter Page

Comments and Discussions
  • beejay, 23 August 2011

    Very great collection. Thank you for the work.

    • newb, 22 September 2012

      nice name.

  • Alinda, 23 August 2011

    just tweeted a link to this site and iphone users are screaming because they CANT SEE IT !!!

    • Robert Bowen, 24 August 2011

      Yes, Alinda, we apologize for the inconvenience, but currently the redesign is having issues on mobile devices. :( We appreciate the heads up though.

      Noupe Editorial Team

  • Kathleen, 23 August 2011

    Wow, that’s a really big collection of navigations. Very nice!

  • carrie, 23 August 2011

    this is an awesome list – thanks for putting it together!

  • César, 23 August 2011

    Excelente!! Gracias!

  • Akino, 23 August 2011

    Great Collection

  • George Dina, 23 August 2011

    Very big and awesome list of resources.
    Thanks for sharing.

  • Kevin Muldoon, 23 August 2011

    Glad you enjoyed the list. I’m working on another good WordPress related article for Noupe readers as we speak :)

  • lxn, 23 August 2011

    Great collections Kevin!

  • Designerist, 24 August 2011

    Thank you very much, Kevin, for collecting and compiling all those great stuff and sharing!
    Great work :-)

  • Joel Aranha, 24 August 2011

    Awesome, Thank you very much Kevin.

  • zohaib, 24 August 2011

    must be very helpful and handy..

  • Houston Web Designer, 24 August 2011

    Awesome set of CSS menu tutorials! Thanks for sharing this techniques.

  • Teylor Feliz, 24 August 2011

    Great collection and thank you for adding our tutorial here!

  • Robert Bowen, 24 August 2011

    As Kevin said, we are really glad that so many people have responded to this post so well. Glad it was useful to so many of our readers.

    Noupe Editorial Team

  • Brittany Rubinstein, 25 August 2011

    A much needed tutorial. Thanks! I’m definitely bookmarking this.

  • Akash, 26 August 2011

    Nice Collection . :)

  • harry spartax, 28 August 2011

    excellent list I ever met!

    I got everything i need to customize navigation menu here,
    thank you so much for share kevin, and to make my work easier and faster.

    Great JOB!

  • Barbaros, 03 September 2011

    Superrr Collections….

  • Kevin Muldoon, 06 September 2011

    Glad everyone enjoyed the list :)

  • Hakan YILMAZ, 07 September 2011

    I’m looking for a full review. thanks

  • Ahmed Abbouh, 10 September 2011

    Amazing! i love this collection

  • Andrei, 10 September 2011

    only can i say its woow, excelent page, congratulations from acapulco, mexico

  • robin, 12 September 2011

    Thanks so much for these wonderful menus. They are very cool.

  • Designer-With-A-View, 14 September 2011

    Excellent collection, Kevin!
    Gave us designers a perspective to visualize the way menus look.
    Nice Work!
    Regards.

  • Jems Aarya, 21 September 2011

    Thank you So much… :) you are great….

  • Balwan, 28 September 2011

    great collection……….thank you very much..:)

  • Majid H, 12 October 2011

    Love you man………i cant believe it. I think this is all what i wanted to know about nav bar menus. You are awesome.

    Thanks

  • Djerba, 16 January 2012

    Great listed to be marked up ;)
    Tahnk you for sharing this tutorials :)

  • Sonish, 26 January 2012

    Great work.You solved my problems.
    Thanks a lot for sharing the tutorials…………..:)

  • Prodyot, 29 February 2012

    Well, this is a list.
    I mean to say- this is “quite a list”.
    Actually, what I mean to say is-this is an awesome list :)
    Thanks for sharing it.

  • Kimron, 29 February 2012

    Great collection – Thank you for sharing

  • Emdadul Huq, 06 March 2012

    very good collection

  • babeltekno, 25 March 2012

    nice css menu collection , may be I’ll try in my project

  • Ali Hamdi, 25 March 2012

    Very nice collection.

  • panara bk, 10 April 2012

    thanks.
    its very use full to me for my project.

  • Shingo Tamura, 23 April 2012

    Great variety of CSS menus. Thanks for putting it together.

  • Justpep, 26 April 2012

    Thanks for sharing a great list of CSS menus

  • Dhriaj, 10 May 2012

    Awesome navigation menu…

  • Amlesh kumar, 22 May 2012

    Nice bunch of menu, thanks for sharing

  • xodepp, 11 June 2012

    thank you brother … I got so many idea about these kinds of CSS menus.

  • Abdul wadood, 17 June 2012

    OOOOOHHHHHHHHHHHHHHH man thank you soooooooooo much.

    i was looking for mega drop down mene for 1 month finallly find here………thank u so much

  • Maria, 23 June 2012

    Very nice job, thanks for sharing….

  • Vishal Ghule, 24 June 2012

    Totally amazing kind of look ,great look design by great person….

  • Bret Lee, 24 June 2012

    so nice …….many many thanks for sharing …..

  • Ravi, 25 June 2012

    Nice collection, thanks for sharing….

  • Triven, 05 July 2012

    Awesome collection …

    Thanks …!

  • amine cheddad, 12 July 2012

    is very very good

  • ajey reddy, 15 July 2012

    good collection i am going to test this on my site

  • sana, 30 July 2012

    thanks alot

  • Quan Ao SI, 04 August 2012

    Wow, ABS Cool!, Thanks very much.
    I chosen number 5 for my site

  • Harmi, 06 August 2012

    Great work, amazing menus, thanks for sharing.

  • Sabrican Ozan, 08 August 2012

    Great samples , excellent work. Thank you very much.

  • saran, 12 August 2012

    Nice collection.thanks.

  • Suresh R, 23 August 2012

    Very nice, very usefull, keep it up

  • Mark Cody, 26 August 2012

    CSS has come a long way in the last few years and the boundaries now seem endless. I think I may have to be revisiting this page over a few days. Thanks for sharing the concepts.

    Mark

  • sandeep, 01 September 2012

    thanks a lot my dear blogger you did a great job i was searching about drop down menu alot for my website now today i got it thanks a lot for your published articles……………… Great job …………..

  • Sathish kumar, 08 September 2012

    nice collection

  • Farzad F Wadia, 20 September 2012

    superb collection….

  • Ahmed, 27 September 2012

    Thanx a lot.

  • Ramzi, 30 September 2012

    a lot of css menu list here
    I was able to choose some form of menu that I will use
    thank you

  • Gops, 04 October 2012

    Really good one

  • Gops, 04 October 2012

    Good One

  • percyvelc, 14 October 2012

    Excellent contribution to style our navigation bar, there are styles for every taste. Thanks for the bonus

  • Topan Setiawan, 15 October 2012

    amazing.’ good work friend.’

  • Rajkumar, 17 October 2012

    Very nice it is very useful to me

  • sandeep, 19 October 2012

    very very good collection and also very useful for learner :)

  • ?????, 21 October 2012

    Awesome, Thank you very much Kevin
    all css menu collection amazing and very useful

  • Kiruba, 22 October 2012

    Awesome Collections. Thank you so much.

  • Kiruba, 22 October 2012

    Awesome Collections.

  • Amit Saswari, 01 November 2012

    Superb collection……….:)

  • Youness, 03 November 2012

    Thank u so muck :)

  • tasarhane, 03 November 2012

    wow collection.. thanks

  • Beau, 08 November 2012

    A great article but some of the links are broken. FYI.

  • Saurabh Singh, 20 November 2012

    Great collection

  • Asad, 03 December 2012

    Awesome … Website..:) …thanks….:)

  • Elance IT, 09 December 2012

    Nice collection, this types of website menu and tutorials are very helpful for new website designer like me, this types of tutorials i am looking for.

    Thank you sharinng

  • Riken Shah, 18 December 2012

    thank u.. nice collection..

  • satya, 18 December 2012

    Nice collection and very attrctive while using in website. Thanks

  • Adam R, 28 December 2012

    Really great and easy to understand tutorials thankyou.

  • krishna, 03 January 2013

    it’s very nice and good look

  • Milos, 11 January 2013

    A truly good menu collection, no need for much more :)

  • Pranab, 17 January 2013

    Great :) .

  • Muhammad Mahtab Saleem, 17 January 2013

    A huge collection of very good looking css styles , I would like to try more then 10 for my projects ,
    Thanks again ,

  • flapane, 24 January 2013

    Typo on Menu #23: hhttp instead of http

  • Madhukar sharma, 07 February 2013

    Good Collection of Navigation Bar………thank you kevin

  • Quan Ao SI, 07 February 2013

    A Big collection of very good css styles!
    Thanks

  • Inzam inzy, 12 February 2013

    It is an awesome menu list , thank uuuuuuuuuuuu………….

  • smile, 22 February 2013

    great collection.. thx

  • Yoko, 27 February 2013

    this is very inspired for me.
    thanks very much!!!

  • ozibite, 04 March 2013

    Thanks for the nice tutorial collection. This is soooo cool.

  • Christian, 10 March 2013

    Not one single menu with submenus that are clickable, just crappy ‘open when hover’ ones except for the ones that are just links. And most of them are just copies of other peoples work, not very impressive.

    • Dieter Petereit, 10 March 2013

      Try reading something fresh, not years old posts

  • haris kotta, 19 March 2013

    great collections to learn more things……thanks.

  • Rasha, 20 March 2013

    This is Awesome :))) Thank u

  • Tom, 20 March 2013

    Great menu list! Thanks very much. It’s time to create some…

  • Jihin Savio, 30 March 2013

    Hats of Kevin….really a good job

  • pompa, 02 April 2013

    thanks for you menus

  • Lakshman, 04 April 2013

    Thanks , keep doing…

  • ram, 17 April 2013

    This site is the best for beginners thanks there is many types of menu and define easy way.
    thanks

  • vijji, 13 June 2013

    Nice menus for practice thanks

  • lina, 29 June 2013

    Thanks a lot very helpfull

  • Colin, 24 July 2013

    Great tutorials, gives us something to build on….. Oh yeh Christian, Kevin has not claimed that any of these menus were created by him!

  • piysuh, 02 August 2013

    thanks a ton, Excellent. keep conti..

    congrats for a long..

  • Gheyath, 18 September 2013

    thnx..

  • Jayant, 19 September 2013

    Great work and thank you very much for the CSS menu tutorials. A very useful site for the beginners to learn.

  • Uday, 28 September 2013

    u r website is good,please tell me how to add these menu code in html(i tried to do same procedure but i dont please help me with it),also tell me that in head,body,css how to add in that,tell me adding js(which is in menu code) to html,please reply

  • Anthony, 02 October 2013

    Awesome list Thank you so much for putting this together. Excellent website

  • Paria, 04 October 2013

    thank you for this Very great collection :)
    this collection helps me a lot.

  • Mohammed Hijazi, 05 November 2013

    Thanks for your awesome CSS menu collection, different styles and colors.

  • Keshav Gyawali (???? ???????), 08 December 2013

    Very good tutorial. Thanks for this awesome items.

  • rob, 04 February 2014

    Awesome tutorials…thnks guys..

  • sajad, 27 February 2014

    oh very nice tutorials tnx guys

  • mukesh patel, 28 February 2014

    awesome thnks boss

search form
 
image description image description