Browse: Home / Resources / 300+ Jquery, CSS, MooTools and JS navigation menus

300+ Jquery, CSS, MooTools and JS navigation menus

By Dainis Graveris • September 13, 2008

title-nav 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

Categories: Resources
Tags: , ,

66 Responses to “ 300+ Jquery, CSS, MooTools and JS navigation menus ”

  1. beets Sep 13th, 2008 at 4:43 am

    holy moly! THANK YOU!! :D

  2. NaldzGraphics Sep 13th, 2008 at 6:39 am

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

    Ronald

    NaldzGraphicss last blog post : Create a Business Card on a Wooden Texture Table in Photoshop

  3. Fox Sep 13th, 2008 at 7:44 am

    Thank you for the mention.

  4. Dainis Graveris Sep 13th, 2008 at 7:55 am

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

  5. CMB Sep 13th, 2008 at 7:55 am

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

  6. Dainis Graveris Sep 13th, 2008 at 7:57 am

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

  7. 300+ sistemas de navegación en Javascript | aNieto2K Sep 13th, 2008 at 1:48 pm

    [...] Recopilación de más de 300 sistemas de navegación para nuestras aplicaciones desarrollados con los frameworks JS más populares. [...]

  8. ericb Sep 14th, 2008 at 2:09 am

    Great List! Thanks 1stwebdesigner!

    ericbs last blog post : To my Dearest Wife – Jen

  9. Roshan Bhattarai Sep 14th, 2008 at 9:25 am

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

  10. Colección impresionante de 300 menús de navegación » Cosas sencillas Sep 15th, 2008 at 12:37 pm

    [...] nos proporcionan los enlaces o descargas a dichos menús, que podemos encontrar en el artículo 300+ Jquery, CSS, MooTools and JS navigation menus (de 1stWebDesigner). Así que los diseñadores y desarrollador web que quieren hacer su trabajo [...]

  11. Free 300+ Styles Web Navigation - WebStockBox Sep 16th, 2008 at 7:46 pm

    [...] If you’re looking for cool web navigations to use in you web design project, this is a nice list of free over 300 styles javascript web navigation collected by 1stwebdesigner.com [...]

  12. 300+ menus de navegación hechos con jQuery, MooTools y CSS | frogx.three Sep 17th, 2008 at 7:00 pm

    [...] Enlace: 300+ jQuery, CSS, Mootools and js navigation menus [...]

  13. + de 300 menús con MooTools y JS | PGK Comunicación Sep 17th, 2008 at 9:50 pm

    [...] páginas como esta es simplemente [...]

  14. Hasan Yalçın » 300′den Fazla Css Menü Sep 18th, 2008 at 4:47 pm

    [...] Jquery, CSS, MooTools ve JS ile hazırlanmış, tasarımlarınızda kolayca kullanabileceğiniz veya modifiye ederek yeni stiller ortaya çıkarabileceğiniz navigasyon örnekleri bu adreste toplanmış! [...]

  15. Enhance Your Web Designs with JavaScript fuctionality | My Ink Blog Sep 20th, 2008 at 7:35 pm

    [...] 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 [...]

  16. Müjdat Korkmaz » MK » Web’den Seçtiklerim #2 Sep 21st, 2008 at 9:48 pm

    [...] 300+ CSS Navigasyon Menu # [...]

  17. Menús para tu web o blog « Blog de Diseño Web Sep 22nd, 2008 at 4:21 pm

    [...] 1stwebdesigner.com, podéis encontrar una recopilación de más de 300 ejemplos de menús con Jquery, [...]

  18. 300+ Css Navigation Menü | Kişisel Düşünceler Sep 22nd, 2008 at 5:30 pm

    [...] menülere kadar genel kullanımda çok yaygın menüler var. menülerin tamamını görmek için buraya. Aralarından en kullanışlı olanları sizler için seçtim. Bunlar içinde yazının devamına [...]

  19. oyunlar Sep 22nd, 2008 at 5:35 pm

    thank you very much.

  20. 300′ün Üzerinde CSS Menüler | mBlog Sep 22nd, 2008 at 7:37 pm

    [...] renkden,her türden menü var.Örnek olsun diye bir kaçtane seçip koydum.Listenin devamı için buraya [...]

  21. 300+ css navigation menü | Batuhan Bulak Sep 22nd, 2008 at 7:57 pm

    [...] menülere kadar genel kullanımda çok yaygın menüler var. menülerin tamamını görmek için buraya. aralarından en kullanışlı olanları sizler için seçtim. bunlar içinde yazının devamına [...]

  22. oyunlar Sep 22nd, 2008 at 10:57 pm

    Great List! Thanks 1stwebdesigner!

  23. Dainis Graveris Sep 23rd, 2008 at 12:03 am

    @ericb You’re welcome!

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

  24. » 300+ Css Navigation Menü | Konya’nın 1 Numaralı Sitesi Sep 23rd, 2008 at 3:48 am

    [...] menülere kadar genel kullanımda çok yaygın menüler var. menülerin tamamını görmek için buraya. Aralarından en kullanışlı olanları sizler için seçtim. Bunlar içinde yazının devamına [...]

  25. Konya’nın 1 Numaralı Sitesi » Blog Archive » 300+ Css Navigation Menü Sep 24th, 2008 at 1:08 am

    [...] menülere kadar genel kullanımda çok yaygın menüler var. menülerin tamamını görmek için buraya. Aralarından en kullanışlı olanları sizler için seçtim. Bunlar içinde yazının devamına [...]

  26. Bol Bol Css Menü - WebGrafikler Sep 24th, 2008 at 4:05 am

    [...] Jquery, CSS, MooTools ve JS kullanılarak hazırlanmış olan kolayca kullanabileceğiniz veya düzenleyerek yeni bir menü ortaya çıkarabileceğiniz örnekler burada toplanmış. [...]

  27. Más de 300 menus con JQuery, Mootools, CSS y Javascript — CalinSoft Sep 24th, 2008 at 6:57 pm

    [...] a recopilado más de 300 menús los cuales nos ayudaran a enriquecer la experiencia del usuario implementando una navegación [...]

  28. Eduardo Camillo Sep 26th, 2008 at 7:50 pm

    Amazing list! And amazing blog!

    Eduardo Camillos last blog post : 6 posts about logos

  29. Santhos Webdesign Sep 28th, 2008 at 3:38 pm

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

  30. Links for 2008-09-22 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web Sep 28th, 2008 at 5:51 pm

    [...] 300 Tutoriais com menus utilizando CSS + javascript + mootools… [...]

  31. Fotofrafia Slubna Oct 15th, 2008 at 3:26 pm

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

  32. Mejora tus diseños web con javascript segun Max Stanworth « edusanver - Blog de Eduardo Sanchez Vera Oct 15th, 2008 at 11:56 pm

    [...] 300 jQuery css, Mootools and js Navigation Menus http://www.1stwebdesigner.com/recources/ 300-jquery-css-mootools-and-js-navigation-menus/ [...]

  33. Rahul Oct 24th, 2008 at 11:06 pm

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

  34. Seo Uyumlu Css Menü | HrN GndZ | Freelance Designer Oct 25th, 2008 at 4:38 pm

    [...] örnekler burada toplanmış. [...]

  35. bola Nov 9th, 2008 at 7:26 pm

    Man you did a great job. Tremendous. Kudos.

  36. Randy Nov 30th, 2008 at 5:04 am

    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!

  37. Peter Schaefer Dec 6th, 2008 at 7:51 pm

    This is incredible! We use a modified version of the accordion navigation on our portfolio. Check it out:

    Lautus Design

    Let me know what you think. I will feature this blog post in our blog.

  38. Dainis Graveris Dec 7th, 2008 at 1:12 am

    thanks for good words! I really appreciate!

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

  39. Nagamalleswara Rao Dec 10th, 2008 at 3:11 pm

    Its a very useful location where an web-designer can find fruitful things to make his life easy!!!

  40. Alexis Dec 11th, 2008 at 2:47 am

    Ta k hermmoso es el JavaScript Ajax y el Jquery mis mejores friends

  41. Jose Dec 24th, 2008 at 9:57 pm

    yo nunca dejo comentarios pero esta vez es la excepcion de lo bueno que es jquery y mootols

  42. Hediye Dec 31st, 2008 at 11:38 am

    Good stuff, thanx!

  43. 300′den fazla CSS menü | Enver Tekay Jan 2nd, 2009 at 12:25 pm

    [...] Tasarımla ugrasan herkesin en büyük dertlerinden birisidir belkide CSS menüler…. Sizler için derlenmiş ve Jquery,CSS, MooTools ve JS ile hazırlanmış ve kolaylıkla kullanabileceğiniz menü örnekleri bu adreste toplanmış! [...]

  44. manes » 300 menuses guapos Jan 9th, 2009 at 10:07 pm

    [...] este enlace nos podemos encontrar unos cuantos menús muy guapos, son “prefabricados” pero no [...]

  45. Hüseyin Jan 15th, 2009 at 1:22 pm

    Great job, thanks!

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

  46. sudeep tamrakar Feb 16th, 2009 at 11:25 am

    thanks for sharing.

  47. My Today’s Diigo 02/26/2009 « Rif.webmemo Feb 27th, 2009 at 2:31 am

    [...] 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner – Love In Design [...]

  48. Sklep Zoologiczny Feb 28th, 2009 at 11:05 pm

    Awesome collection, great post. Delicioused.

  49. Aze535 Mar 13th, 2009 at 6:44 pm

    Thanks. Nice collection!

  50. Bali fashion Mar 20th, 2009 at 5:06 am

    nice css list, thank you to share with us

  51. Studio fotograficzne Metka Mar 21st, 2009 at 9:52 pm

    Thanks for that post – it is realy useful!

  52. Mar-22-2009 JavaScript/DHTML links | w3feeds Mar 22nd, 2009 at 9:04 am

    [...] 300+ Jquery, CSS, MooTools and JS navigation menus | 1stwebdesigner – Love In Design [...]

  53. 77 schicke und praktische Navigationsmenüs Apr 2nd, 2009 at 10:56 pm

    [...] 300+ jQuery, CSS, MooTools and JavaScript navigation menus [...]

  54. Niek Kouwenberg Apr 8th, 2009 at 11:52 am

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

  55. Navigation Menu Inspirations « Design Development Inspiration Apr 19th, 2009 at 1:43 pm

    [...] a comment » Source: 300+ Jquery, CSS, MooTools and JS navigation menus Fancy Menu Excellent CSS dock menu for MAC lovers made with jQuery Almost 5 years old menu Amazing [...]

  56. Raj Apr 21st, 2009 at 5:49 pm

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

  57. Urvi Apr 24th, 2009 at 9:33 am

    thanks a ton

  58. origami Apr 26th, 2009 at 9:57 pm

    thanks and nice (.

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

  59. JQuery Articles May 1st, 2009 at 1:15 pm

    [...] 300+ Jquery, CSS, MooTools and JS navigation menus [...]

  60. Breve introducción a jQuery y/o Mootools: Librerías para Javascript | AlmacenPlantillasWeb blog May 14th, 2009 at 9:21 pm

    [...] 300 menus de navegación con Jquery, Mootools, CSS y JS [...]

  61. phpfoxtemplate May 17th, 2009 at 10:17 am

    thanks for the lists, very good resources

    phpfoxtemplates last blog post : Custom Template Design

  62. Sulumits Retsambew May 22nd, 2009 at 11:35 pm

    this is really incridible list.. thanks

  63. Sulumits Retsambew May 22nd, 2009 at 11:36 pm

    i love the css mac with jquery.. i’ll use it ..thanks

    Sulumits Retsambews last blog post : Sulumits Retsambew remind me of Canada

  64. Sulumits Retsambew May 22nd, 2009 at 11:38 pm

    Ta k hermmoso es el JavaScript Ajax y el Jquery mis mejores friends

    Sulumits Retsambews last blog post : Is sulumits retsambew an alien?

  65. Sulumits Retsambew show May 29th, 2009 at 5:54 am

    this is the mootools which i was searching for, thank you, finally find it here

  66. Michael Doni Jun 9th, 2009 at 2:26 pm

    Man.

    The best gallery..

    I saw too many sites, but this page is the best page I ever see with examples.

    Ty
    =D

Leave a Reply

CommentLuv Enabled

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>

« Wayback machine – history of Internet 9 Useful Image Hosting Services Reviewed »