Design

100 Great CSS Menu Tutorials

August 23rd, 2011

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

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

Tags: ,

Sort by:   newest | oldest | most voted
beejay
Guest
5 years 1 month ago

Very great collection. Thank you for the work.

newb
Guest
4 years 2 days ago

nice name.

Alinda
Guest
Alinda
5 years 1 month ago

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

Robert Bowen
Noupe Team
5 years 1 month ago

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
Guest
5 years 1 month ago

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

carrie
Guest
5 years 1 month ago

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

César
Guest
César
5 years 1 month ago

Excelente!! Gracias!

Akino
Guest
Akino
5 years 1 month ago

Great Collection

George Dina
Guest
5 years 1 month ago

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

lxn
Guest
5 years 1 month ago

Great collections Kevin!

Designerist
Guest
5 years 1 month ago

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

Joel Aranha
Guest
Joel Aranha
5 years 1 month ago

Awesome, Thank you very much Kevin.

zohaib
Guest
5 years 1 month ago

must be very helpful and handy..

Houston Web Designer
Guest
5 years 1 month ago

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

Teylor Feliz
Guest
5 years 1 month ago

Great collection and thank you for adding our tutorial here!

Robert Bowen
Noupe Team
5 years 1 month ago

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
Guest
5 years 1 month ago

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

Akash
Guest
5 years 30 days ago

Nice Collection . :)

harry spartax
Guest
5 years 28 days ago

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
Guest
Barbaros
5 years 21 days ago

Superrr Collections….

Hakan YILMAZ
Guest
5 years 17 days ago

I’m looking for a full review. thanks

Ahmed Abbouh
Guest
5 years 15 days ago

Amazing! i love this collection

Andrei
Guest
Andrei
5 years 15 days ago

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

robin
Guest
5 years 12 days ago

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

Designer-With-A-View
Guest
Designer-With-A-View
5 years 11 days ago

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

Jems Aarya
Guest
Jems Aarya
5 years 4 days ago

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

Balwan
Guest
Balwan
4 years 11 months ago

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

Majid H
Guest
4 years 11 months ago

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
Guest
4 years 8 months ago

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

Sonish
Guest
Sonish
4 years 7 months ago

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

Prodyot
Guest
Prodyot
4 years 6 months ago

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
Guest
4 years 6 months ago

Great collection – Thank you for sharing

Emdadul Huq
Guest
Emdadul Huq
4 years 6 months ago

very good collection

babeltekno
Guest
4 years 6 months ago

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

Ali Hamdi
Guest
4 years 6 months ago

Very nice collection.

panara bk
Guest
panara bk
4 years 5 months ago

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

Shingo Tamura
Guest
4 years 5 months ago

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

Justpep
Guest
4 years 4 months ago

Thanks for sharing a great list of CSS menus

Dhriaj
Guest
4 years 4 months ago

Awesome navigation menu…

Amlesh kumar
Guest
Amlesh kumar
4 years 4 months ago

Nice bunch of menu, thanks for sharing

xodepp
Guest
4 years 3 months ago

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

Abdul wadood
Guest
4 years 3 months ago

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
Guest
Maria
4 years 3 months ago

Very nice job, thanks for sharing….

Vishal Ghule
Guest
4 years 3 months ago

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

Bret Lee
Guest
Bret Lee
4 years 3 months ago

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

Ravi
Guest
Ravi
4 years 3 months ago

Nice collection, thanks for sharing….

Triven
Guest
Triven
4 years 2 months ago

Awesome collection …

Thanks …!

amine cheddad
Guest
amine cheddad
4 years 2 months ago

is very very good

ajey reddy
Guest
4 years 2 months ago

good collection i am going to test this on my site

sana
Guest
sana
4 years 1 month ago

thanks alot

Quan Ao SI
Guest
4 years 1 month ago

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

Harmi
Guest
Harmi
4 years 1 month ago

Great work, amazing menus, thanks for sharing.

Sabrican Ozan
Guest
Sabrican Ozan
4 years 1 month ago

Great samples , excellent work. Thank you very much.

saran
Guest
4 years 1 month ago

Nice collection.thanks.

Suresh R
Guest
Suresh R
4 years 1 month ago

Very nice, very usefull, keep it up

Mark Cody
Guest
4 years 29 days ago

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
Guest
4 years 24 days ago

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
Guest
Sathish kumar
4 years 17 days ago

nice collection

Farzad F Wadia
Guest
Farzad F Wadia
4 years 5 days ago

superb collection….

Amit
Guest
4 years 8 hours ago
Ahmed
Guest
Ahmed
3 years 11 months ago

Thanx a lot.

Ramzi
Guest
Ramzi
3 years 11 months ago

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

Gops
Guest
Gops
3 years 11 months ago

Really good one

Gops
Guest
Gops
3 years 11 months ago

Good One

percyvelc
Guest
percyvelc
3 years 11 months ago

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

Topan Setiawan
Guest
Topan Setiawan
3 years 11 months ago

amazing.’ good work friend.’

Rajkumar
Guest
Rajkumar
3 years 11 months ago

Very nice it is very useful to me

sandeep
Guest
sandeep
3 years 11 months ago

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

?????
Guest
?????
3 years 11 months ago

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

Kiruba
Guest
Kiruba
3 years 11 months ago

Awesome Collections. Thank you so much.

Kiruba
Guest
Kiruba
3 years 11 months ago

Awesome Collections.

Amit Saswari
Guest
Amit Saswari
3 years 10 months ago

Superb collection……….:)

Youness
Guest
3 years 10 months ago

Thank u so muck :)

tasarhane
Guest
3 years 10 months ago

wow collection.. thanks

Beau
Guest
Beau
3 years 10 months ago

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

Saurabh Singh
Guest
Saurabh Singh
3 years 10 months ago

Great collection

Asad
Guest
Asad
3 years 9 months ago

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

Elance IT
Guest
Elance IT
3 years 9 months ago

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
Guest
3 years 9 months ago

thank u.. nice collection..

satya
Guest
3 years 9 months ago

Nice collection and very attrctive while using in website. Thanks

Adam R
Guest
Adam R
3 years 8 months ago

Really great and easy to understand tutorials thankyou.

krishna
Guest
krishna
3 years 8 months ago

it’s very nice and good look

Milos
Guest
Milos
3 years 8 months ago

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

Pranab
Guest
Pranab
3 years 8 months ago

Great :) .

Muhammad Mahtab Saleem
Guest
Muhammad Mahtab Saleem
3 years 8 months ago

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

flapane
Guest
3 years 8 months ago

Typo on Menu #23: hhttp instead of http

Madhukar sharma
Guest
3 years 7 months ago

Good Collection of Navigation Bar………thank you kevin

Quan Ao SI
Guest
3 years 7 months ago

A Big collection of very good css styles!
Thanks

Inzam inzy
Guest
3 years 7 months ago

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

smile
Guest
smile
3 years 7 months ago

great collection.. thx

Yoko
Guest
Yoko
3 years 6 months ago

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

ozibite
Guest
3 years 6 months ago

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

Christian
Guest
Christian
3 years 6 months ago

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
Noupe Team
3 years 6 months ago

Try reading something fresh, not years old posts

haris kotta
Guest
haris kotta
3 years 6 months ago

great collections to learn more things……thanks.

Rasha
Guest
Rasha
3 years 6 months ago

This is Awesome :))) Thank u

Tom
Guest
3 years 6 months ago

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

Jihin Savio
Guest
Jihin Savio
3 years 5 months ago

Hats of Kevin….really a good job

pompa
Guest
3 years 5 months ago

thanks for you menus

Lakshman
Guest
Lakshman
3 years 5 months ago

Thanks , keep doing…

ram
Guest
ram
3 years 5 months ago

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

wpDiscuz