It’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands. Navigation is one of the most important elements in Web Design.

jQuery is a very powerful tool. With a jQuery menu plugin your site visitors may have the best and most dynamic navigation available. jQuery is a lightweight, cross-browser compliant, incredibly awesome and extremely powerful JavaScript framework (library) that emphasizes and simplifies interaction between JavaScript, CSS and HTML. With jQuery, you can change the look and feel of your website into something extraordinary, and it is easier than you think.

In this post we are showcasing 30 excellent jQuery Plugins for Navigation and Menus. Enjoy!!

Sidr

Sidr 1

Live Demo Download

Slidebars

Slidebars

Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.

Live Demo Download

Pushy

Pushy

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This project was inspired by the off-canvas navigation menu seen on Medium.

Live Demo Download

jQuery Square Menu

jQuery Square Menu

Create a Square-like Menu Animation for Website using jQuery and CSS3.

Live Demo Download

Mashable Style Ajax Drop Down Menu

Mashable Style Ajax Drop Down Menu

Mashable style dynamic drop down menu using Php, Mysql & jQuery Ajax. In mashable, you can able to see all posts from the category from their header drop down menu.

Live Demo Download

Perspective Page View Navigation

Perspective Page View Navigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

Live Demo Download

Navgoco

Navgoco

Navgoco is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

Live Demo Download

HorizontalNav

HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

Live Demo Download

stack.js

stack.js

A presentation library with intuitive, scroll-based navigation.

Live Demo Download

FlexNav jQuery Plugin

FlexNav jQuery Plugin

A jQuery plugin for responsive menus. FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility.

Live Demo Download

Menutron

Menutron

A jQuery plugin for responsive navigation menus.

Live Demo Download

jlNav

jlNav

jlNav is a jQuery plugin which creates a nice little CSS-driven navigation menu from nested unordered lists.

Live Demo Download

jQuery and CSS3 Awesome Slide Down Box Menu

jQuery and CSS3 Awesome Slide Down Box Menu

The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Live Demo Download

Image Menu with Jquery

Image Menu with Jquery

Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I’ve come up with using the power of jquery javascript.

Live Demo Download

jQuery ListMenu Plugin

jQuery ListMenu Plugin

This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable ‘first-letter’ based menuing system, allowing quick and ‘out-of the-way’ access to hundreds of items.

Live Demo Download

Create Vimeo-like top navigation

Create Vimeo-like top navigation

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial.

Live Demo Download

Responsive Nav

Responsive Nav

Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window.

Live Demo Download