300+ Jquery, CSS, MooTools and JS navigation menus

Posted in Coding, Coding, Freebies, HTML & CSS, JS & AJAX, Tutorials6 years ago • Written by 63 Comments

If You are web developer great navigation menus always comes handy. I united this list for people like me, who sometimes wants to do job fast and choose from already prepared examples, which are easy to use. So here are many resources starting from very simple HTML and CSS navigation menus, until very complicated and advanced jQuery, JavaScript and MooTools techniques used to get maximal control with fading, sliding, dragging etc. effects. Be sure to bookmark this site for later use!

1.Fancy menu – very cool navigation menu:

orange-menu

2. Excellent CSS dock menu for MAC lovers made with jQuery:

css-dock-menu

Download dock menu

3. 37 different CSS navigation techniques:

navigation-6

4. Almost 5 years old menu, but looks great:

nav-7

5. Nice jQuery sliding effect menu with 4 different examples:

jquery-nav

6. Updated JQuery Nested Tab Set with Demo;

7. Vertical Flyout JavaScript Menu;

8. 13 hand-picked Vertical and horizontal CSS Menus ;

9. Different tutorials for CSS menu creation;

10. Big library of vertical CSS menus from dynamicdrive.com;

11. Nice collection of  ~150 different CSS menus from CSSplay.com – regularly updated.

I really recommend You to visit this site:

cssplay

12. Menu with simple show/hide effect – 2 examples with CSS and MooTools;

13. Superfish v1.4.8 – jQuery menu plugin;

14.Accessible Image-Tab Rollovers;

15. Simple CSS vertical menu Digg-like;

16. Simple Javascript Accordions;

17. Unique navigation menu using jQuery and MooTools:

nav-jquery

18.CSSmenumaker.com – offers professional CSS menus;

19. Cool JavaScript menus from JavaScriptkit.com;

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

21. jdMenu Hierarchical Menu Plugin for jQuery – vertical multilevel dropdown list;

22. Amazing apple style navigation menu:

apple-nav

23. Accordion style jQuery menu:

accordion-menu

24. Cool animated navigation with CSS and jQuery:

nav-8

25. jQuery Treeview Plugin:

treeview

26. 35 different unique Jquery demos with different features

27. Jquery fastfind menu – click toogle menu, to get popup navigation menu:

quick-navi

28. jQuery idTabs – 8 different cool jQuery examples:

jquery-cool

29. jQuery ContextMenu – lightweight jQuery plugin that lets You selectively override the browser’s right-click menu with a custom one of your own:

contextmenu

30. jQuery UI tabs – different tab effects as simple tab, start with custom tab, slide effect, fade effect and much more;

31. iconDock jQuery – one more similar navigation to MAC OS X dock effect;

32. SlidingMenu – very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype)

33. Tabbed navigation

These eleven menus are created using the Sliding Doors technique, these menus work also correctly in Internet Explorer.

navigation-1

Download all menus

34. Another CSS tabbed navigation:

tabbed-navigation

35. 9 different CSS block menus:

block-navigation

Download all menus

36. 12 more different CSS menus.

navigation-2

37. ADxMenu – 4 different examples of cool navigation menus:

navigation-3

Download

39. At CSSmenubuilder is huge list of different and modern look menus, take Your best pick:

navigation-4

navigation-5

40. Huge list of different menu examples:

listamatic

listamatic2

41. CSSmenus: horizontal and vertical:

css-menu-vertical

42. Great navigation and little more, one of the popular accordion versions:

accordion

Download accordion menu

CSS menu generators:

List-u-Like CSS Generator

This generator allows You to create 3 different styles of menu

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

215 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

63 Comments Best Comments First
  • Burak

    Saturday, April 24th, 2010 09:11

    44

    Super tutorials grear share.Thanks a lot.

    +2
  • Dainis Graveris

    Saturday, September 13th, 2008 07:55

    5

    @beets, Ronald this article creation took me a while and thanks for passing by

    @Fox You’ve great list too – I just didn’t dare not to mention Your article :)

    +1
  • cuaryos

    Saturday, March 27th, 2010 15:39

    42

    css and java script is greater way to greatest visualization web. thank you.

    +1
  • Russell

    Wednesday, April 21st, 2010 11:48

    43

    This year I read about Whooga’s in a fashion forum and decided to give them a try. I ordered a size too small initially and had to return them for a 6 which was a bit annoying but eventually worth the wait, I’m a 5.5 in most shoes but boots sometimes vary between 5.5 and 6. I probably should have measured my foot

    +1
  • Studio fotograficzne Metka

    Saturday, March 21st, 2009 21:52

    23

    Thanks for that post – it is realy useful!

    +1
  • Rusli zainal

    Sunday, July 5th, 2009 16:14

    28

    thanks, nice huge collections..

    0
  • Lenen

    Monday, July 13th, 2009 16:20

    29

    Impressive gallery. Personally I especially like the (35.) 9 different CSS block menus.

    0
  • origami

    Sunday, April 26th, 2009 21:57

    27

    thanks and nice (.

    origamis last blog post : origami yapılışı pdf formatında e-kitap

    0
  • Hediye

    Wednesday, December 31st, 2008 11:38

    19

    Good stuff, thanx!

    0
  • Hüseyin

    Thursday, January 15th, 2009 13:22

    20

    Great job, thanks!

    Hüseyins last blog post : Python 3.0 hazır

    0
  • sudeep tamrakar

    Monday, February 16th, 2009 11:25

    21

    thanks for sharing.

    0
  • Urvi

    Friday, April 24th, 2009 09:33

    26

    thanks a ton

    0
  • Raj

    Tuesday, April 21st, 2009 17:49

    25

    Hi, First of all Kudos for the gr8 resources! How did I miss this for so long……U Rock!!! Thanks a Million.

    0
  • Niek Kouwenberg

    Wednesday, April 8th, 2009 11:52

    24

    Hi, just happened to come along this article, and wanted to add that I’ve recently made a pure XHTML/CSS menu with JavaScript effects called “Menu.js” (http://www.menujs.net/).

    It can be either horizontal or vertical and can be altered in any way using CSS. Based on Prototype and includes support for Script.aculo.us effects.

    New features which will be added soon are:
    - keyboard support
    - pause before opening
    - unlimited nested levels

    I’m using it everywhere (Duh), and all colleagues hail this script due to it’s flexibility, clean HTML code and solid/fast dropdown menu’s (across browsers).

    0
  • Bali fashion

    Friday, March 20th, 2009 05:06

    22

    nice css list, thank you to share with us

    0
  • Dainis Graveris

    Sunday, December 7th, 2008 01:12

    18

    thanks for good words! I really appreciate!

    @Peter Schaefer that’s great, Your site is really looking good!

    0
  • Randy

    Sunday, November 30th, 2008 05:04

    17

    So nice to know there are great people in the world who just want to help others without some big payout. This is a great list and I will pass the link!
    Thanks!

    0
  • ely

    Sunday, October 11th, 2009 10:22

    30

    great and very useful site, i’ll these menus on my next projects.

    0
  • ericb

    Sunday, September 14th, 2008 02:09

    7

    Great List! Thanks 1stwebdesigner!

    ericbs last blog post : To my Dearest Wife – Jen

    0
  • Roshan Bhattarai

    Sunday, September 14th, 2008 09:25

    8

    Thanks for such a great list and including my accordion menu…….

    0
  • CMB

    Saturday, September 13th, 2008 07:55

    6

    Thank you for including my site in your list, much appreciated.

    0
  • Fox

    Saturday, September 13th, 2008 07:44

    4

    Thank you for the mention.

    0
  • beets

    Saturday, September 13th, 2008 04:43

    2

    holy moly! THANK YOU!! :D

    0
  • NaldzGraphics

    Saturday, September 13th, 2008 06:39

    3

    nice this is a huge list again.keep it up as always.

    Ronald

    0
  • oyunlar

    Monday, September 22nd, 2008 17:35

    9

    thank you very much.

    0
  • oyunlar

    Monday, September 22nd, 2008 22:57

    10

    Great List! Thanks 1stwebdesigner!

    0
  • Rahul

    Friday, October 24th, 2008 23:06

    15

    These are really cool menu examples. I’d really love to use them in some of my works as well. Thanks for the article.

    0
  • bola

    Sunday, November 9th, 2008 19:26

    16

    Man you did a great job. Tremendous. Kudos.

    0
  • Fotofrafia Slubna

    Wednesday, October 15th, 2008 15:26

    14

    Super! This is something I was looking for in a long time! Thank you!

    0
  • Santhos Webdesign

    Sunday, September 28th, 2008 15:38

    13

    Holy shait! This list is just too big! This is great for inspiration!

    0
  • Dainis Graveris

    Tuesday, September 23rd, 2008 00:03

    11

    @ericb You’re welcome!

    @Roshan You’re welcome! You did great job creating it!

    0
  • Eduardo Camillo

    Friday, September 26th, 2008 19:50

    12

    Amazing list! And amazing blog!

    Eduardo Camillos last blog post : 6 posts about logos

    0
  • irfan

    Friday, December 11th, 2009 03:30

    32

    Hi
    this is great post it’s help me alot but I have a issue working with mootols and jquery both are awesome and work well but when I use them togather some things are not working.
    pls advice
    thanks
    irfan

    0
  • Darryl

    Wednesday, October 14th, 2009 22:03

    31

    This post has really helped me to understand JS and CSS thanks alot.

    0
  • Kahif

    Saturday, June 11th, 2011 12:32

    54

    thanks…for the navigations….

    0
  • Marry Wilbourne

    Friday, May 13th, 2011 02:43

    53

    I and my pals have been analyzing the nice helpful hints located on your web blog then immediately I had a terrible feeling I had not thanked the site owner for those strategies. All of the women had been as a result joyful to read all of them and have now in reality been taking pleasure in these things. Appreciate your actually being considerably considerate as well as for getting certain amazing things most people are really wanting to understand about. My honest regret for not expressing appreciation to you earlier.

    0
  • Flemming

    Wednesday, March 23rd, 2011 21:04

    52

    Awesome list! I needed new inspiration and found it. Thanks.

    0
  • kapadokya

    Thursday, July 22nd, 2010 18:42

    50

    very good blog thanks for web..

    0
  • Düzce

    Wednesday, September 8th, 2010 09:56

    51

    This is a blinding set of menu’s!
    Well done

    0
  • Laxmidhar

    Wednesday, June 22nd, 2011 21:53

    55

    wow , very nice

    0
  • anupal

    Monday, July 11th, 2011 20:13

    56

    well done thanxx

    0
  • Lokesh

    Tuesday, December 13th, 2011 11:51

    61

    A good collection of links. Appreciate the effort.

    0
  • Chandra

    Tuesday, January 10th, 2012 12:01

    62

    Great Collection! Thank You so much for sharing.

    0
  • Andy

    Saturday, November 5th, 2011 08:10

    60

    Yes, this is great. Thank you!

    0
  • Sumu

    Friday, November 4th, 2011 20:06

    59

    This is awesome. Thanks for putting together.

    0
  • Dewi Nurdiyah

    Wednesday, August 17th, 2011 19:44

    57

    Wow.. Amazing, lumayan deh… bisa gua download

    0
  • נתי נוישטיין

    Monday, October 17th, 2011 15:33

    58

    realy great collection and a realy good tutorial, tnx

    0
  • sikiş

    Friday, June 11th, 2010 22:15

    49

    Thanks for all the work, really helpful!

    0
  • kirtasiye

    Saturday, June 5th, 2010 20:35

    48

    Verry nice tutorial, thanks.

    0
  • kapadokya

    Friday, January 22nd, 2010 17:47

    36

    Massive collection that makes websites more pleasant to visitors. Thanks for this!

    0
  • Pelu

    Sunday, January 10th, 2010 22:17

    35

    A lot of code for Accordion v2.0, javascripts files are to big to be useful. It makes unnecessary trafic for the server!

    0
  • saideep

    Saturday, January 9th, 2010 16:01

    34

    Hi,

    Really excellent collection of links….really they are handy.

    good job !!

    0
  • Dainis Graveris

    Saturday, September 13th, 2008 07:57

    1

    @CMB be my guest, You own very nice resources – I am happy, I found Your site!

    0
  • waqas

    Monday, December 14th, 2009 15:06

    33

    thanx for the post

    0
  • Surftipps

    Friday, January 29th, 2010 00:05

    37

    Pretty cool choise.
    Thanks for all the work, really helpful!

    0
  • sinan

    Tuesday, February 9th, 2010 16:48

    38

    thanks for sharing i love jquery and css

    0
  • sikiş

    Tuesday, May 25th, 2010 19:07

    46

    Good stuff, thanx!Good stuff, thanx!

    0
  • rakesh sinhg

    Monday, May 31st, 2010 06:35

    47

    Really excellent collection and thanks for sharing jquery and css

    0
  • DldBox

    Saturday, May 8th, 2010 17:50

    45

    Thanks really unique collection and more stuff,
    Thanks for every thing, Bye…

    0
  • R.Ramich

    Saturday, March 13th, 2010 22:08

    41

    Danke danke. Seeeehr gute Sammlung ;)

    0
  • ykman

    Saturday, February 13th, 2010 23:00

    39

    Good stuff, thanx!

    0
  • sikis

    Saturday, February 13th, 2010 23:01

    40

    thanks for sharing i love jquery and css

    0
  • Suman

    Wednesday, January 18th, 2012 05:15

    63

    nice one….but which one of above did you used…?? need something similar…for a site…i am designing :)

    +1
  • Chandra

    Tuesday, January 10th, 2012 12:01

    62

    Great Collection! Thank You so much for sharing.

    0
  • Lokesh

    Tuesday, December 13th, 2011 11:51

    61

    A good collection of links. Appreciate the effort.

    0
  • Andy

    Saturday, November 5th, 2011 08:10

    60

    Yes, this is great. Thank you!

    0
  • Sumu

    Friday, November 4th, 2011 20:06

    59

    This is awesome. Thanks for putting together.

    0
  • נתי נוישטיין

    Monday, October 17th, 2011 15:33

    58

    realy great collection and a realy good tutorial, tnx

    0
  • Dewi Nurdiyah

    Wednesday, August 17th, 2011 19:44

    57

    Wow.. Amazing, lumayan deh… bisa gua download

    0
  • anupal

    Monday, July 11th, 2011 20:13

    56

    well done thanxx

    0
  • Laxmidhar

    Wednesday, June 22nd, 2011 21:53

    55

    wow , very nice

    0
  • Kahif

    Saturday, June 11th, 2011 12:32

    54

    thanks…for the navigations….

    0
  • Marry Wilbourne

    Friday, May 13th, 2011 02:43

    53

    I and my pals have been analyzing the nice helpful hints located on your web blog then immediately I had a terrible feeling I had not thanked the site owner for those strategies. All of the women had been as a result joyful to read all of them and have now in reality been taking pleasure in these things. Appreciate your actually being considerably considerate as well as for getting certain amazing things most people are really wanting to understand about. My honest regret for not expressing appreciation to you earlier.

    0
  • Flemming

    Wednesday, March 23rd, 2011 21:04

    52

    Awesome list! I needed new inspiration and found it. Thanks.

    0
  • Düzce

    Wednesday, September 8th, 2010 09:56

    51

    This is a blinding set of menu’s!
    Well done

    0
  • kapadokya

    Thursday, July 22nd, 2010 18:42

    50

    very good blog thanks for web..

    0
  • sikiş

    Friday, June 11th, 2010 22:15

    49

    Thanks for all the work, really helpful!

    0
  • kirtasiye

    Saturday, June 5th, 2010 20:35

    48

    Verry nice tutorial, thanks.

    0
  • rakesh sinhg

    Monday, May 31st, 2010 06:35

    47

    Really excellent collection and thanks for sharing jquery and css

    0
  • sikiş

    Tuesday, May 25th, 2010 19:07

    46

    Good stuff, thanx!Good stuff, thanx!

    0
  • DldBox

    Saturday, May 8th, 2010 17:50

    45

    Thanks really unique collection and more stuff,
    Thanks for every thing, Bye…

    0
  • Burak

    Saturday, April 24th, 2010 09:11

    44

    Super tutorials grear share.Thanks a lot.

    +2
  • Russell

    Wednesday, April 21st, 2010 11:48

    43

    This year I read about Whooga’s in a fashion forum and decided to give them a try. I ordered a size too small initially and had to return them for a 6 which was a bit annoying but eventually worth the wait, I’m a 5.5 in most shoes but boots sometimes vary between 5.5 and 6. I probably should have measured my foot

    +1
  • cuaryos

    Saturday, March 27th, 2010 15:39

    42

    css and java script is greater way to greatest visualization web. thank you.

    +1
  • R.Ramich

    Saturday, March 13th, 2010 22:08

    41

    Danke danke. Seeeehr gute Sammlung ;)

    0
  • sikis

    Saturday, February 13th, 2010 23:01

    40

    thanks for sharing i love jquery and css

    0
  • ykman

    Saturday, February 13th, 2010 23:00

    39

    Good stuff, thanx!

    0
  • sinan

    Tuesday, February 9th, 2010 16:48

    38

    thanks for sharing i love jquery and css

    0
  • Surftipps

    Friday, January 29th, 2010 00:05

    37

    Pretty cool choise.
    Thanks for all the work, really helpful!

    0
  • kapadokya

    Friday, January 22nd, 2010 17:47

    36

    Massive collection that makes websites more pleasant to visitors. Thanks for this!

    0
  • Pelu

    Sunday, January 10th, 2010 22:17

    35

    A lot of code for Accordion v2.0, javascripts files are to big to be useful. It makes unnecessary trafic for the server!

    0
  • saideep

    Saturday, January 9th, 2010 16:01

    34

    Hi,

    Really excellent collection of links….really they are handy.

    good job !!

    0
  • waqas

    Monday, December 14th, 2009 15:06

    33

    thanx for the post

    0
  • irfan

    Friday, December 11th, 2009 03:30

    32

    Hi
    this is great post it’s help me alot but I have a issue working with mootols and jquery both are awesome and work well but when I use them togather some things are not working.
    pls advice
    thanks
    irfan

    0
  • Darryl

    Wednesday, October 14th, 2009 22:03

    31

    This post has really helped me to understand JS and CSS thanks alot.

    0
  • ely

    Sunday, October 11th, 2009 10:22

    30

    great and very useful site, i’ll these menus on my next projects.

    0
  • Lenen

    Monday, July 13th, 2009 16:20

    29

    Impressive gallery. Personally I especially like the (35.) 9 different CSS block menus.

    0
  • Rusli zainal

    Sunday, July 5th, 2009 16:14

    28

    thanks, nice huge collections..

    0
  • origami

    Sunday, April 26th, 2009 21:57

    27

    thanks and nice (.

    origamis last blog post : origami yapılışı pdf formatında e-kitap

    0
  • Urvi

    Friday, April 24th, 2009 09:33

    26

    thanks a ton

    0
  • Raj

    Tuesday, April 21st, 2009 17:49

    25

    Hi, First of all Kudos for the gr8 resources! How did I miss this for so long……U Rock!!! Thanks a Million.

    0
  • Niek Kouwenberg

    Wednesday, April 8th, 2009 11:52

    24

    Hi, just happened to come along this article, and wanted to add that I’ve recently made a pure XHTML/CSS menu with JavaScript effects called “Menu.js” (http://www.menujs.net/).

    It can be either horizontal or vertical and can be altered in any way using CSS. Based on Prototype and includes support for Script.aculo.us effects.

    New features which will be added soon are:
    - keyboard support
    - pause before opening
    - unlimited nested levels

    I’m using it everywhere (Duh), and all colleagues hail this script due to it’s flexibility, clean HTML code and solid/fast dropdown menu’s (across browsers).

    0
  • Studio fotograficzne Metka

    Saturday, March 21st, 2009 21:52

    23

    Thanks for that post – it is realy useful!

    +1
  • Bali fashion

    Friday, March 20th, 2009 05:06

    22

    nice css list, thank you to share with us

    0
  • sudeep tamrakar

    Monday, February 16th, 2009 11:25

    21

    thanks for sharing.

    0
  • Hüseyin

    Thursday, January 15th, 2009 13:22

    20

    Great job, thanks!

    Hüseyins last blog post : Python 3.0 hazır

    0
  • Hediye

    Wednesday, December 31st, 2008 11:38

    19

    Good stuff, thanx!

    0
  • Dainis Graveris

    Sunday, December 7th, 2008 01:12

    18

    thanks for good words! I really appreciate!

    @Peter Schaefer that’s great, Your site is really looking good!

    0
  • Randy

    Sunday, November 30th, 2008 05:04

    17

    So nice to know there are great people in the world who just want to help others without some big payout. This is a great list and I will pass the link!
    Thanks!

    0
  • bola

    Sunday, November 9th, 2008 19:26

    16

    Man you did a great job. Tremendous. Kudos.

    0
  • Rahul

    Friday, October 24th, 2008 23:06

    15

    These are really cool menu examples. I’d really love to use them in some of my works as well. Thanks for the article.

    0
  • Fotofrafia Slubna

    Wednesday, October 15th, 2008 15:26

    14

    Super! This is something I was looking for in a long time! Thank you!

    0
  • Santhos Webdesign

    Sunday, September 28th, 2008 15:38

    13

    Holy shait! This list is just too big! This is great for inspiration!

    0
  • Eduardo Camillo

    Friday, September 26th, 2008 19:50

    12

    Amazing list! And amazing blog!

    Eduardo Camillos last blog post : 6 posts about logos

    0
  • Dainis Graveris

    Tuesday, September 23rd, 2008 00:03

    11

    @ericb You’re welcome!

    @Roshan You’re welcome! You did great job creating it!

    0
  • oyunlar

    Monday, September 22nd, 2008 22:57

    10

    Great List! Thanks 1stwebdesigner!

    0
  • oyunlar

    Monday, September 22nd, 2008 17:35

    9

    thank you very much.

    0
  • Roshan Bhattarai

    Sunday, September 14th, 2008 09:25

    8

    Thanks for such a great list and including my accordion menu…….

    0
  • ericb

    Sunday, September 14th, 2008 02:09

    7

    Great List! Thanks 1stwebdesigner!

    ericbs last blog post : To my Dearest Wife – Jen

    0
  • CMB

    Saturday, September 13th, 2008 07:55

    6

    Thank you for including my site in your list, much appreciated.

    0
  • Dainis Graveris

    Saturday, September 13th, 2008 07:55

    5

    @beets, Ronald this article creation took me a while and thanks for passing by

    @Fox You’ve great list too – I just didn’t dare not to mention Your article :)

    +1
  • Fox

    Saturday, September 13th, 2008 07:44

    4

    Thank you for the mention.

    0
  • NaldzGraphics

    Saturday, September 13th, 2008 06:39

    3

    nice this is a huge list again.keep it up as always.

    Ronald

    0
  • beets

    Saturday, September 13th, 2008 04:43

    2

    holy moly! THANK YOU!! :D

    0
  • Dainis Graveris

    Saturday, September 13th, 2008 07:57

    1

    @CMB be my guest, You own very nice resources – I am happy, I found Your site!

    0
  • Suman

    Wednesday, January 18th, 2012 05:15

    63

    nice one….but which one of above did you used…?? need something similar…for a site…i am designing :)

    +1

Comments are closed.

54.205.160.82 - unknown - unknown - US