300+ Jquery, CSS, MooTools and JS navigation menus

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

[showmyads]

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

Dainis Graveris

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!

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    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.

  2. rakesh sinhg says

    Really excellent collection and thanks for sharing jquery and css

  3. DldBox says

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

  4. Russell says

    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

  5. Pelu says

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

  6. says

    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

  7. origami says

    thanks and nice (.

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

  8. Raj says

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

  9. says

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

  10. Randy says

    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!

  11. says

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

  12. says

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

  13. Suman says

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