35 Awesome jQuery Navigation Enhancing Plugin Tutorials

35 Awesome jQuery Navigation Enhancing Plugin Tutorials

Posted on 28. Dec, 2009 by in Resources


One of the single most important elements on a website is the  navigation.  For a website to work properly the navigation needs to be laid out well, intuitive and most of all useful.  In the past when you wanted to do anything interesting with your navigation it took complex programming languages or Flash to achieve, today that is different.  jQuery is an excellent choice for creating dynamic, exciting navigation without all the hours of programming.  Check out these 35 awesome jQuery plugins for creating the perfect website navigation. Check out the demos and download the already-built scripts and add them quickly and easily to your site.

Interested in more jQuery tutorials, take a look at jQuery image plugin tutorials

Puffer Fish Navigation
Rollover navigation with a glow

Tutorial

Example

Puffer Fish JQuery Navigation

Puffer Fish JQuery Navigation

Sexy Drop Down Menu with jQuery and CSS
How to create a sexy drop down menu that can also degrade gracefully.

Tutorial

Example

Sexy Drop Down Menu w/ jQuery & CSS

Sexy Drop Down Menu w/ jQuery & CSS

jQuery Simple Drop-Down Menu
Extremely simple drop-down menu. The peculiarity of this menu is that these 20 lines of code and absence of various cumbersome mouse events within html code.

Tutorial

Example

jQuery Simple Drop-Down Menu

jQuery Simple Drop-Down Menu

Fancy Navigation with jQuery
Rollover navigation with a glow. Has simple and elegant roll over effects

Tutorial

Example

Fancy Navigation with CSS & jQuery

Fancy Navigation with CSS & jQuery

iPod-style Drilldown and Flyout Menu
The iPod-style menu provides easy navigation of complex nested structures with any number of levels.

Tutorial

Example

iPod-style Drilldown and Flyout Menu

iPod-style Drilldown and Flyout Menu

Beautiful Slide Out Navigation
Gives a beautiful effect and using this technique can spare you some space on your website.

Tutorial

Example

Beautiful Slide Out Navigation

Beautiful Slide Out Navigation

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Build your own tabbed Interface using jQuery with slideDown/slideUp effect.

Tutorial

Example

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Fanciest Dropdown Menu You Ever Saw
Fancy and Stylized Dropdown Horizontal Navigation

Tutorial

Example

Fanciest Dropdown Menu You Ever Saw

Fanciest Dropdown Menu You Ever Saw

Superfish v1.4.8
Enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu

Tutorial

Example

Superfish v1.4.8

Superfish v1.4.8

Color Fading Menu with jQuery
CSS and jQuery powered rollover that alters the color of the button

Tutorial

Example

Color Fading Menu with jQuery

Color Fading Menu with jQuery

Simple and Beautiful jQuery Accordion Tutorial
Well-known javascript accordion with the most minimal amount of html, css, javascript code and of course, with a beautiful interface

Tutorial

Example

Simple and Beautiful jQuery Accordion Tutorial

Simple and Beautiful jQuery Accordion Tutorial

Slide and Hide Section Navigation
Create a slide and hide menu, where the menu items slide in and then hide themselves elegantly to give way for the selected menu item.

Tutorial

Example

Slide and Hide Section Navigation

Slide and Hide Section Navigation

Cool Animated Navigation with CSS and jQuery
Build a really cool animated navigation menu using just CSS and jQuery.

Tutorial

Example

Cool Animated Navigation with CSS and jQuery

Cool Animated Navigation with CSS and jQuery

jQuery UI Tabs
Simple jQuery powered tabbed navigation

Tutorial

Example

jQuery UI Tabs

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial Build your own tabbed Interface using jQuery with slideDown/slideUp effect. Tutorial Example jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Kwicks Menu with jQuery
An apple style menu and improve it via jQuery

Tutorial

Example

Kwick Transform

Kwicks jQuery Navigation

Vertical Sliding Menu
Create a sliding menu button using jquery

Tutorial

Example

Vertical Sliding Menu

Vertical Sliding Menu

Mega Dropdown Navigation
Dropdown navigation with multiple links and lists

Tutorial

Example

Mega Dropdown Navigation

Mega Dropdown Navigation

Sliding JavaScript Menu Highlight
This sliding hover effect script is an easy method to add some flavor to your navigation.

Tutorial

Example

Sliding JavaScript Menu Highlight

Sliding JavaScript Menu Highlight

Create Vimeo-like top navigation
Create a curved drop down vertical navigation with curved edges.

Tutorial

Example

Vimeo-like Top Navigation in jQuery

Vimeo-like Top Navigation in jQuery

jQuery for Background Image Animations
Pull off various Background Effects in Your Navigation With This Tutorial

Tutorial

Example

jQuery for Background Image Animations

jQuery for Background Image Animations

Scrolling jQuery Menu
Vertical Scrolling Menu made with CSS and jQuery

Tutorial

Example

Vertically Scrolling jQuery Menu

Vertically Scrolling jQuery Menu

Navigation Effect Using jQuery
Simple sliding animation when you hover over each button

Tutorial

Example

Navigation Effect Using jQuery

Navigation Effect Using jQuery

Query (mb)Menu 2.7
Powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way

Tutorial

Example

jQuery (mb)Menu 2.7

jQuery (mb)Menu 2.7

Image Menu With Jquery
Image Driven Expanding Horizontal Navigation

Tutorial

Example

Image Menu with jQuery

Image Menu with jQuery

Animated Horizontal Menu
Horizontal Scroll Menu with jQuery that scrolls automatically according to your mouse axis-Y movement.

Tutorial

Example

Animated Horizontal Scroll Menu

Animated Horizontal Scroll Menu

jQuery plugin: Treeview
Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Tutorial

Example

jQuery plugin: Treeview

jQuery plugin: Treeview


Simple Accordian
There are a lot of scripts we have seen and sure you too would have seen them. This script is one of the smallest accordion script which is extremely simple and easy to integrate.

Tutorial

Example

Simple Accordian jQuery

Simple Accordian jQuery

Scrolling jQuery Menu
Horizontal Scrolling Menu made with CSS and jQuery

Tutorial

Example

Scrolling jQuery Menu

Scrolling jQuery Menu

Menu Fader
Fading Menu – Replacing Content

Tutorial

Example

jQuery Menu Fader

jQuery Menu Fader

A circular menu with sub menus
A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle.

Tutorial

Example

Circular jQuery menu with sub menus

Circular jQuery menu with sub menus

Animated Drop Down Menu
Smooth Animated Menu using jQuery

Tutorial

Example

Animated Drop Down Menu

Animated Drop Down Menu

JQuery/CSS Dock Menu
This mac style navigation menu provides the user a clean, organized and animated interface for surfing a site’s content.

Tutorial

Example

JQuery/CSS Dock Menu

JQuery/CSS Dock Menu

Super slick jQuery menu with CSS3
Animated graphic menu that fades the inactive navigation.

Tutorial

Example

Super slick jQuery menu with CSS3

Super slick jQuery menu with CSS3

Sliding-Sliding Doors – Animated jQuery Menu
Animated menu with sliding rollover

Tutorial

Example

Sliding-Sliding Doors - Animated jQuery Menu

Sliding-Sliding Doors - Animated jQuery Menu

Best online printing company offers postcards printing – PsPrint.com

Tags: , , ,

40 Responses to “35 Awesome jQuery Navigation Enhancing Plugin Tutorials”

  1. resume

    28. Dec, 2009

    Thank you for the information, it will surely help me a lot. Cheers!!!

    [Reply]

  2. Tweets that mention 35 Awesome jQuery Navigation Enhancing Plugin Tutorials | Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources -- Topsy.com

    28. Dec, 2009

    [...] This post was mentioned on Twitter by paula and neslihan rawles, Web RSS News. Web RSS News said: 35 Awesome jQuery Navigation Enhancing Plugin Tutorials http://ow.ly/Qudd [...]

  3. uberVU - social comments

    28. Dec, 2009

    Social comments and analytics for this post…

    This post was mentioned on Twitter by neslirawles: RT @designtuts4u 35 Awesome jQuery Navigation Enhancing Plugin Tutorials | Web Design Tutorials and Inspiration | Le… http://bit.ly/8V8dx1…

  4. Alex Flueras

    29. Dec, 2009

    This is an excellent list. Thanks for sharing!

    [Reply]

  5. tripwire magazine | tripwire magazine

    29. Dec, 2009

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [...]

  6. chinwue

    29. Dec, 2009

    Excellent !
    I will bring some to my semester project.
    Thanks!

    [Reply]

    bmackler Reply:
    December 30th, 2009 at 10:18 am

    @chinwue, Best of luck. what is your semester project?

    [Reply]

  7. Jeff Corey

    29. Dec, 2009

    nice work….thanks

    [Reply]

  8. Bill

    29. Dec, 2009

    Very nice!
    Great resource for inspiration and know-how.

    Thanks alot!

    [Reply]

    bmackler Reply:
    December 30th, 2009 at 10:20 am

    @Bill, Yes, there are tons out there, these were just the best that I uncovered. Glad you found them of good use

    [Reply]

  9. 155+ Fresh Community Links for Designers and Developers | tripwire magazine

    29. Dec, 2009

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [...]

  10. 155+ Fresh Community Links for Designers and Developers | Programming Blog

    29. Dec, 2009

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [...]

  11. SMiGL

    30. Dec, 2009

    “jQuery Tabbed Interface / Tabbed Structure Menu Tutorial” is cool! Good collection

    [Reply]

  12. 網站製作學習誌 » [Web] 連結分享

    02. Jan, 2010

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [...]

  13. 155+ Fresh Community Links for Designers and Developers | Afif Fattouh - Web Specialist

    05. Jan, 2010

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [...]

  14. Mary Lou

    07. Jan, 2010

    Hello there! Thanks for mentioning our “Beautiful Slide Out Navigation”! The link to the example is http://tympanus.net/Tutorials/FixedNavigationTutorial/
    Great Post BTW!

    [Reply]

    bmackler Reply:
    January 7th, 2010 at 10:15 pm

    @Mary Lou, My pleasure. its such a great example of wonderful jQuery I couldn’t not show it! Thank you.

    Glad you like the post. I look forward to further feedback in the future.

    [Reply]

  15. 35 Awesome jQuery Navigation Enhancing Plugin Tutorials [ Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web ]

    18. Jan, 2010

    [...] 35 Awesome jQuery Navigation Enhancing Plugin Tutorials January 16th 2010 3:03am One of the single most important elements on a website is the navigation For a website to work properly the navigation needs to be laid out well intuitive and most of all useful In the past when you wanted to do anything interesting with your navigation it took complex programming languages or Flash to From: designtutorials4u.com [...]

  16. MarkSpizer

    03. May, 2010

    great post as usual!

    [Reply]

  17. Web Design Northampton

    11. May, 2010

    Great post, some of these look really neat. Can’t wait to try them out in designs.

    Thanks.

    [Reply]

  18. grooms speech

    12. Jul, 2010

    These look fantastic are these navigational structures easily crawled by Google? This is one of the issues I have had with some drop down style menus.

    [Reply]

  19. Valador

    21. Jul, 2010

    This is an excellent list. Thanks for sharing!

    [Reply]

  20. Graphic Design Junction

    24. Jul, 2010

    Amazing jQuery collection. i like ur presentation style.. thanks

    [Reply]

  21. Beta

    28. Jul, 2010

    Thanks for mentioning our “Beautiful Slide Out Navigation”!This is very excellent.Thanks to sharing.

    [Reply]

  22. Jerry garcia tie

    23. Aug, 2010

    nice work….thanks

    [Reply]

  23. Simple

    26. Aug, 2010

    Amazing jQuerys collection.

    [Reply]

  24. vlinh

    05. Sep, 2010

    that’s really awesome menu jquery..thank a lots. i like it

    [Reply]

  25. Domitila Dreiss

    29. Dec, 2010

    I am always invstigating online for tips that can facilitate me. Thx!

    [Reply]

  26. zahnarzt

    12. Jan, 2011

    i hate javascript navigation… they are deadly for SEO.. and now, the SEO is what counts, not the fancy effects

    [Reply]

    bmackler Reply:
    January 13th, 2011 at 8:10 am

    yes, the enternal struggle between design, development and SEO. While SEO has great importance, so does the design and overall appeal. because if once you get them to your site, you need to keep them there. for some people a cool an innovative navigation can do just that.

    [Reply]

    yachtcharter Reply:
    January 14th, 2011 at 3:16 pm

    @bmackler, you are right.. the design and overall appeal are important too, but SEO still remains the best traffic source, targeted traffic. I think you can very easily create a very well optimized site and with a clean and nice design :)

    [Reply]

    bmackler Reply:
    January 17th, 2011 at 10:53 am

    @yachtcharter,

    I think the problem is that alot of SEO “pros” are willing to sacrifice good design infavor of “following all the rules” when they do not need to. especially when the rules constantly change.

    good SEO should work in unision with good design, neither should have to suffer.

  27. cityville cheat codes

    22. Feb, 2011

    I like these plugins allot, I create websites almost weekly so this is a nice little post you got here. Just looking at some of these I noticed I have used a couple. My personal favourites would be either Puffer Fish Navigation or JQuery/CSS Dock Menu, both very stylish and simple.

    [Reply]

  28. jewelcrafting leveling guide

    23. Mar, 2011

    Very nice description and plugins, exteremly useful for website designers… thanks a lot for your tutorials

    [Reply]

  29. fbf diet

    12. Apr, 2011

    very nice and helpful tutorial. as a matter of fact I do use some of these plugins and really recommend these

    [Reply]

  30. Yachtcharter Holland

    16. Apr, 2011

    all these plugins are nice… but I don’t like overloading my site with javascript.. I mean, those fancy effects are nice, but they slow down your site loading speed and this is a factor that google takes into consideration when it’s ranking sites

    [Reply]

  31. vilkij

    14. Aug, 2011

    very good Jquery

    [Reply]

  32. Manoz

    08. Nov, 2011

    Thankx for sharing………. but i want some thing new and unique like sliding out on mouse hover from left corner.. to 100%.

    [Reply]

  33. chovy

    10. Feb, 2012

    jQuery.tabbed() navigation is a light-weight jQuery plugin for handling tabbed navigation with minimal markup. https://github.com/chovy/tabbed-navigation

    [Reply]

  34. presents

    08. Apr, 2012

    thank you for the inspirations. sexy drop down is my favourite.

    [Reply]

Leave a Reply