13 Excellent Tutorials On Creating jQuery Navigation Menu

Posted By Admin on December 02, 2008  | Filed under: CSS, Web Design, jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

In this post I’ve selected 13 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.

Before getting stared you maybe interested in looking my post about making navigation menu using CSS and Adobe Photoshop.

[13 hand-picked Vertical and horizontal CSS Menus]


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

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect.
JQ_1

2- How to make accordion menu using jquery

In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

JQ_2

3- jQuery idTabs

JQ_3

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

JQ4

5- Using jQuery for Background Image Animations

JQ_5

6- jQuery & CSS Example - Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

JQ_6

7- Create an apple style menu and improve it via jQuery

JQ_7

8- Creating a Floating HTML Menu Using jQuery and CSS

JQ_8

9- Drop down menu with jquery

Here’s a drop down animated menu example made with jquery.js 1.2.2

JQ98

10- Jquery Vertical Slide (Dropdown) Navigation

JQ_10

11- Multi-level drop down menu with jQuery

There are a lot of horizontal drop menus around the web today and they are becoming more and more popular. If you have ever seen these menus and wondered how they work, then today is your lucky day! Here I will be discussing my thoughts as I build a drop down menu from scratch and add some jQuery to it to make it just that little bit more unique and special.

JQ_11

12- Seven jquery plugin to build lovely menu

JQ_12

13- Superfish - “menu jQuery plugin”

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript).

JQ_13

Popularity: 90% [?]

29 Comments For This Post So Far

  1. User Gravatar Roshan Bhattarai
    5:23 pm on December 2nd, 2008

    thanks for including my accordion menu……….cheers……

  2. User Gravatar Raymond Selda
    1:37 am on December 3rd, 2008

    Nice list. Back then I was using Prototype like everyone else but then JQuery along and I know that its going to be my javascript framework. Thank you.

  3. User Gravatar Jane
    8:44 am on December 3rd, 2008

    Hi,I never used Jquery in web developement.Thanks for providing this information.Thanks.

  4. User Gravatar Simon
    8:56 am on December 3rd, 2008

    Thanks! Great list. I would also recommend http://www.IzzyMenu.com - free CSS menu builder with jQuery animation included.

  5. User Gravatar Timothy
    5:34 pm on December 3rd, 2008

    I love the ‘Mootools inspired’ navigation menu. Why not just use mootools then? It’s more fun to code in anyway.

  6. User Gravatar coda
    6:52 pm on December 3rd, 2008

    I’ve tried most of these menu scripts - the only one I’d recommend is Superfish, but even that is a bit bloated for instances when you require a simple, single-level drop-down menu.

  7. User Gravatar Kris
    1:58 pm on December 4th, 2008

    Cool stuff.
    Thanks for the tutorials.

    I like the superfish one. Looks nice and elegant

  8. User Gravatar Kayla
    6:28 pm on December 27th, 2008

    Just what i was looking for, thanks!

  9. User Gravatar chazzuka
    3:17 pm on December 30th, 2008

    thank you, great to see mine in the list :) hope ppls love it

  10. User Gravatar FomdrineDoomi
    8:50 am on January 30th, 2009

    adding up cialis pasquil

  11. User Gravatar orgazibra
    9:25 am on January 30th, 2009

    adding up cialis feigned

  12. User Gravatar sudeep tamrakar
    6:18 am on February 16th, 2009

    thanks for sharing these menus.

  13. User Gravatar website design
    9:22 am on March 11th, 2009

    Great jQuery menu examples! Thank you

  14. User Gravatar ARTI
    10:27 am on April 17th, 2009

    It works fine on my version of Firefox 1.5.0.1 Perhaps you don’t have the latest version. I run an image gallery myself, but I don’t think type of layout would art? work very well for me as I have descriptions for my images and some of the images are quite large. I don’t know, it might be worth experimenting with.

  15. User Gravatar Allan Cass
    6:28 pm on April 22nd, 2009

    Great stuff! I love the Mootol and Apple style menus!
    JQuery is really powerful.

  16. User Gravatar Tomas Matejka
    10:53 am on April 28th, 2009

    Great article! Thanks…

  17. User Gravatar Webagentur
    7:23 am on June 6th, 2009

    Thank you … this has me hery helped. That superfish menu is realy very nice.

Trackbacks

  1. CSS Brigit |13 Excellent Tutorials On Creating jQuery Navigation Menu

    13 Excellent Tutorials On Creating jQuery Navigation Menu…

    DeveloperFox ha recopilado 13 excelentes tutoriales para crear menus de navegación con JQuery….

  2. 13 Tutorials On Creating jQuery Navigation Menu - Kreativuse™ - Creative Resources and Inspirations

    [...] Sometimes CSS is not enough to express your creativity. Thats when jQuery can help you. Read these tutorials to create cool navigation menu using jQuery. [...]

  3. WebAir Blog » Blog Archive » Menu in jQuery

    [...] lettura > Tutorial jQuery Tags: jquery, web2.0, wedesign Category: [...]

  4. 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox - Illuminations

    [...] 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox. Tags: jquery, menus [...]

  5. 13 Excellent Tutorials On Creating jQuery Navigation Menu | bloground.ro - Blogging resources, WordPress themes and plugins for your development

    [...] Source: http://www.developerfox.com/ [...]

  6. links for 2008-12-03 « Minesa IT

    [...] 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox (tags: webdevelopment webdev webdesign tutorials web tutorial tabs resources) [...]

  7. Links for 2008-12-07 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web

    [...] Criando menus de navegação com jquery [...]

  8. Daily Digest for 2009-02-11 | Stephen Bolen

    [...] Bookmarked a link on Delicious. 13 Excellent Tutorials On Creating jQuery Navigation Menu [...]

  9. Large list of JQuery resources, tutorials and cheat sheets | Web Design Blog x2interactive. ??? blog ??? ?? Internet ??? ?? Web Design

    [...] 13 Excellent Tutorials On Creating jQuery Navigation Menu [...]

  10. 13 ?????? ?? ???????? ????????? ?? Jquery | Help For Web Developers

    [...] ???????? ??????: http://www.developerfox.com/13-excellent-tutorials-on-creating-jquery-navigation-menu/584 [...]

  11. Tagz | "13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox" | Comments

    [...] [upmod] [downmod] 13 Excellent Tutorials On Creating jQuery Navigation Menu | DeveloperFox (developerfox.com) 1 points posted 5 months, 2 weeks ago by SixSixSix tags jquery imported [...]

  12. mirakim » Blog Archive » Navigation Reference Site

    [...] http://www.developerfox.com/13-excellent-tutorials-on-creating-jquery-navigation-menu/584 13?? ?? [...]

Leave a Reply