52 Best of the Best jQuery Navigation

by WebMinimalist.com on Nov 23, 2010
in Javascript3 Comments


Site navigation menu is a very important tool a visitor goes through to access the content. Today we will take a look at best jquery navigation menu to enhance your website.

1. jQuery & CSS Example – Dropdown Menu

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

jQuery & CSS Example – Dropdown Menu
jQuery & CSS Example – Dropdown Menu demo

2. jQuery Tabbed Interface / Tabbed Structure Menu

This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.

jQuery Tabbed Interface / Tabbed Structure Menu
jQuery Tabbed Interface / Tabbed Structure Menu demo

3. Animated Menus Using jQuery

How to create an animated menu (very similar to Dragon Interactive’s menu).

Animated Menus Using jQuery
Animated Menus Using jQuery demo

4. Fisheye JavaScript Menu

Fisheye Menu is an expanding menu based on the MacOSX doc.

Fisheye JavaScript Menu
Fisheye JavaScript Menu demo

5. Sliding JavaScript Menu Highlight 1kb

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”.

Sliding JavaScript Menu Highlight 1kb
Sliding JavaScript Menu Highlight 1kb demo

6. Create a Cool Animated Navigation with CSS and jQuery

How to build a really cool animated navigation menu using just CSS and jQuery.

Create a Cool Animated Navigation with CSS and jQuery
Cool Animated Navigation with CSS and jQuery demo

7. Create a multilevel dropdown menu with CSS and improve it via jQuery

Learn how to create a multi level dropdown menu, and improve it with a little bit of jQuery.

multilevel dropdown menu
Multilevel dropdown menu demo

8. jQuery ListNav Plugin

An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.

jQuery ListNav Plugin
jQuery ListNav Plugin demo

9. Sliding Jquery Menu

Learn how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Sliding Jquery Menu
Sliding Jquery Menu demo

10. CSS Sprites2

Create inline menu navigation using CSS Sprites2.

CSS Sprites2
CSS Sprites2 demo

11. CSS Dock Menu

Learn how to create CSS dock menu Mac style.

CSS Dock Menu
CSS Dock Menu demo

12. Kwicks for jQuery

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.

Kwicks for jQuery
Kwicks for jQuery demo

13. Dynamic Page / Replacing Content

Dynamic Page / Replacing Content
Dynamic Page / Replacing Content demo

14. Smooth Animated Menu with jQuery

Learn how to build a menu and animate it with some smooth effects.

Smooth Animated Menu with jQuery
Smooth Animated Menu with jQuery demo

15. Vimeo-like top navigation

How to create top navigation like on Vimeo.com.

Create Vimeo-like top navigation
Vimeo-like top navigation demo

16. Slick Tabbed Content Area using CSS and jQuery

How to build a simple little tabbed information box in HTML, then make it function using Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Slick Tabbed Content Area using CSS and jQuery
Slick Tabbed Content Area demo

17. Animated Drop Down Menu with jQuery

Learn how to create animated drop down Menu with jQuery.

Animated Drop Down Menu with jQuery
Animated Drop Down Menu demo

18. A Stylish Navigation Menu With jQuery

How to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.

A Stylish Navigation Menu With jQuery
A Stylish Navigation Menu demo

19. Garagedoor Effect using jQuery

Here is the Garage Door effect, now in jQuery.

Garagedoor Effect using jQuery
Garagedoor Effect using jQuery demo

20. Using jQuery for Background Image Animations

Changing the position of the background image felt to be the best approach to creating the type of effect we’re looking for.

Using jQuery for Background Image Animations
Using jQuery for Background Image Animations demo

21. Floating HTML Menu Using jQuery and CSS

Learn how to create floating HTML menu using jQuery and CSS.

Floating HTML Menu Using jQuery and CSS
Floating HTML Menu Using jQuery and CSS demo

22. Coda-Slider

Learn how to create Coda-Slider.

Coda-Slider
Coda-Slider

23. Mega Drop Down Menus w/ CSS & jQuery

Mega drop down menus tested to be more efficient for large scale websites.

Mega Drop Down Menus w/ CSS & jQuery
Mega Drop Down Menus w/ CSS & jQuery demo

24. Use Sprites to Create an Awesomeness-Filled Navigation Menu

CSS sprites can dramatically increase your site’s performance. With jQuery, we can implement awesome transition effects easily.

Awesomeness-Filled Navigation Menu
Awesomeness-Filled Navigation Menu demo

25. Tab Navigation with Smooth Horizontal Sliding Using jQuery

How to create a navigation menu that slides horizontally.

Tab Navigation with Smooth Horizontal Sliding Using jQuery
Tab Navigation with Smooth Horizontal Sliding Using jQuery demo

26. droppy – Nested drop down menus

Quick and dirty nested drop-down menu in the jQuery style.

droppy - Nested drop down menus
droppy – Nested drop down menus demo

27. Creating a navigation menu with CSS & jQuery

Learn to create a navigation menu with CSS & jQuery.

Creating a navigation menu with CSS & jQuery
Navigation menu with CSS & jQuery demo

28. Apple style menu and improve it via jQuery

Learn how to create an Apple style menu and improve it via jQuery.

Create an apple style menu and improve it via jQuery
Apple style menu with jQuery demo

29. Sexy Drop Down Menu w/ jQuery & CSS

Learn to create sexy drop down menu with jQuery and CSS.

Sexy Drop Down Menu w/ jQuery & CSS
Sexy Drop Down Menu w/ jQuery & CSS demo

30. Mega Drop-Down Menu with jQuery

Tutorial about how to create mega drop-down menu with jQuery.

Mega Drop-Down Menu with jQuery
Mega Drop-Down Menu with jQuery demo

31. CompareNetworks jQuery’d Bread Crumb – jBreadCrumb

This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.

jBreadCrumb
jBreadCrumb demo

32. ‘Mootools Homepage’ inspired navigation effect using jQuery

Learn how to create a ‘Mootools Homepage’ inspired navigation effect using jQuery.

‘Mootools Homepage’ inspired navigation effect using jQuery
‘Mootools Homepage’ inspired navigation effect using jQuery demo

33. Keypress Navigation Using jQuery

Learn how to create a keypress navigation using jQuery.

How To Create A Keypress Navigation Using jQuery
Keypress Navigation Using jQuery demo

34. LavaLamp for jQuery lovers

The nifty effect of Lava Lamp.

LavaLamp for jQuery lovers!
LavaLamp demo

35. UvumiTools Dropdown Menu

It is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework.

UvumiTools Dropdown Menu
UvumiTools Dropdown Menu demo

36. Simple Javascript Accordions

Learn how to create a simple javascript accordions.

Simple Javascript Accordions
Simple Javascript Accordions demo

37. MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.
How to create an amazing slide out menu or navigation for your website.

MenuMatic
MenuMatic demo

38. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
Beautiful Slide Out Navigation demo

39. jQuery UI Selectmenu

Create variety of the features currently supported in the selectmenu plugin.

jQuery UI Selectmenu
jQuery UI Selectmenu demo

40. jQuery OS X-style – Dock And Stack Navigation

Learn to create OS X-style – Dock And Stack Navigation.

Outside-the-Box
jQuery OS X-style – Dock And Stack Navigation demo

41. Superfish

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.

Superfish
Superfish demo

42. Fresh Content Accordion

Learn how to make a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Fresh Content Accordion
Fresh Content Accordion demo

43. Color Fading Menu with jQuery

A short jQuery tutorial on how to achieve fading hover effects.

Color Fading Menu with jQuery
Color Fading Menu with jQuery demo

44. jQuery Tabbed Navigation

How to create a tabbed navigation script with jQuery, and then modifying it so that it works without JavaScript.

jQuery Tabbed Navigation
jQuery Tabbed Navigation demo

45. Elastic Thumbnail Menu

Magnifies menu items when they are hovered over.

Elastic Thumbnail Menu
Elastic Thumbnail Menu demo

46. BDC DrillDown Menu, an iPod-style menu

A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time.

BDC DrillDown Menu, an iPod-style menu
iPod-style menu demo

47. jQuery mb.menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way.

jQuery mb.menu
jQuery mb.menu demo

48. A Different Top Navigation

This tutorial will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

A Different Top Navigation
A Different Top Navigation demo

49. Slide out and drawer effect

The effect is commonly known as an ‘accordion’ and it’s usually used to slide up, or down blocks of content to expose new blocks. The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed.

Slide out and drawer effect
Slide out and drawer effect demo

50. Vertical Scroll Menu with jQuery Tutorial

Create a vertical scroll menu that scroll automatically according to your mouse axis-Y movement.

Vertical Scroll Menu with jQuery Tutorial
Vertical Scroll Menu demo

51. jQuery idTabs

idTabs is simple and easy to use.

jQuery idTabs
jQuery idTabs demo

52. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

jQuery File Tree
jQuery File Tree demo

3 Responses to “52 Best of the Best jQuery Navigation”

  1. Hi! I really like this post. From reading this blog I really know all that things about jQuery what I didn’t know before. Its really informative post for me. Thanks for sharing!

  2. Really a great information about jquery i am searching for this post and now i got proper post from your side. Thanks for this wonderful post much appreciate.

  3. Thanks for sharing 52 Best JQuery navigation plugin. It’s helped me much in implementation.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>