50 Free jQuery Navigation Bar Plugins and Tutorials

AD

The best of the best jQuery navigation bar plugins to spark-up your web designs.

Navigation of a website can be considered as the backbone of web design. It is the focal point of interactivity with users/visitors. Navigation is the one of the things that make a first impression. The conclusion is that the navigation menu should be approached with great care. And jQuery can take care of it.

This is a collection of few of the finest jQuery plugins (and their tutorials) for making your navigation bar exceptional. Of course, if you know a little bit of coding, you can easily customize them and make something of your own.

jQuery Navigation Bar Plugins

Good Luck!

Create a Cool Animated Menu with jQuery

Photoshop Tutorial + Coding Tutorial + Download

Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Demo | Download

Floating Social Toolbar With jQuery And CSS

Coding Tutorial + Download

The floating bar displays from the top of the page in a subtle way that starts increasing the bar’s opacity little by little, besides that you will find on the 2nd demo that when you roll over the bar, a fancy tooltip will display.

free download

Demo | Download

NavDoc

Download only.

This resource contains two types of stylish menu designs. Smooth Ajax adds the spark, blue is the color, rest is history.

NavDoc: jquery navigation bar for web developers.

Demo | Download

jQuery Facets

Download only.

This is a very impressive image based slider like navigation panel.

Image based jquery navigation bar.

Demo 1 2 3 | Download

Akordeon

Download only.

The idea behind Akordeon is to provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space.

Accordian based navigation for jQuery plugin users.

Demo | Download

jQuery Sidebar Flyout Navigation

Download only.

This is a popout style menu that can fly out from any side of the page. It uses fixed position and CSS3 powered.

Navigation in a side.

Demo | Download

Page Scroller

Download + Full Documentation

If you don’t need API and skins, you can get it for free, otherwise $35.

Premium class navigation bar and scroller for jQuery lovers.

Demo | Download

Ascensor

Download only.

This is not a horizontal menu, neither is it a vertical one! Just have a look.

jquery plugin for navigation menu

Demo | Download

Expanding Image Menu

Coding Tutorial + Download

Create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them.

free javascript

Demo | Download

Garagedoor Effect Using JavaScript – jQuery Edition

Coding Tutorial + Download

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

garrange navigation

Demo | Tutorial

Mega Drop Down Menu

Coding Tutorial + Download

The jQuery Mega Drop Down Menu plugin takes any standard HTML nested lists and turns them into horizontal mega menus.

free plugin

Demo | Download

Animated Content Menu

Coding Tutorial + Download

Create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear.

Demo | Downlaod

Mega Vertical

Coding Tutorial + Download

This plugin creates vertical mega menus from standard HTML nested lists, allowing users to view all available menu options for each top-level menu item.

free plugin and tutorial

Demo | Download

Overlay Effect

Coding Tutorial + Download

Create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay.

jquery menu

Demo | Download

Memu

Download only.

A small, jQuery plugin which is quite easy to use. It’s a menu which can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS).

free plugin download for jQuery

Demo | Download

Simple Easing naviDropDown

Coding Tutorial + Download

You can set the orientation of the drop down depending if your navigation is horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.

Demo | Download

Simple and Effective jQuery Dropdown Login Form

Download only.

A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to. All you have to do is implement and hook it up to your website.

Demo | Download

Create Vimeo-like top navigation

Coding Tutorial + Download

This menu drops down when you hover search box. It offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list.

videmo like top navigation

Demo | Donwload

Apple Style Menu

Photoshop Tutorial + Coding Tutorial + Download

This is an A-to-Z tutorial and download pack. You start off in Photoshop by creating the basic design, then implement by coding it. Since you have all the tutorials, you can try it with your own variations.

jquery

Demo | Download

Horizontal Scrolling Menu with CSS and jQuery

Coding Tutorial

A similarly looking menu with just CSS and jQuery. This menu works fine in all major browsers and degrades gracefully when JavaScript is turned off.

jquery horizontal navigation

Demo | Tutorial

Cool Animated Navigation with CSS

Design Tutorial + Coding Tutorial + Download

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the go-to for anything animated, these days, with the magic of JavaScript, we can avoid Flash altogether.

free navigation bar

Demo | Download

Fixed Fade Out Menu

Coding Tutorial + Download

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent.

free navigation bar for web developers

Demo | Download

Fading Menu – Replacing Content

Code only.

So now instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff. Fading Menu Jquery

Elastic Thumbnail Menu

Coding Tutorial + Download

This is a very common image based navigation menu which we have seen plenty of times. One of the hottest items in navigation showcase.

jquery javascript

Demo | Download

Halftone Navigation Menu

Coding Tutorial + Download

Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

jQuery and HTML5

Demo | Download

Simple jQuery Flickr Style Tooltip Menu

Coding Tutorial + Download

The plugin contains CSS, that contains gradient and manipulating box so that can look like a triangle in the tooltip menu after the main menu clicked.

free plugin

Demo | Download

Slide Down Box Menu

Coding Tutorial + Download

The idea is to make a box with the menu item slide out, while a thumbnail pops up. The submenu will slide to the left or to the right depending on which menu item we are hovering.

jQuery navigation

Demo | Download

jQuery CSS Dock Menu

Coding Tutorial + Download

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons.

Demo | Download

Rocking and Rolling Rounded Menu

Coding Tutorial + Download

Create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

navigation bar plugin

Demo | Download

Blue Overlay Effect

Coding Tutorial + Download

Create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.

navigation bar plugin and tutorial

Demo | Download

Animated Menus Using jQuery

Photoshop + Coding Tutorial + Download

How to create an animated menu (very similar to dragoninteractive.com menu). It’s a pretty well designed site.

navigation tutorial

Demo | Download

Smooth Animated Menu with jQuery

Coding Tutorial + Download

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects.

Download and Tutorial

Demo | Download

Color Fading Menu with jQuery

Coding Tutorial + Download

How to perform color and image merging. We will be using jQuery and the jQuery Colour plugin.

jquery how to

Demo | Download

Menu Matic

Coding Tutorial + Download

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.

navigation bar tutorials and downloads

Demo | Download

HoverAccordion

Coding Tutorial + Download

This is yet another accordion script, except you don’t have to click to open one item, you just move your mouse over it.

jquery menu download and tutorial

DemoDownload

Sexy Drop Down Menu w/ jQuery & CSS

Coding Tutorial + Download

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is crucial — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential.

jquery navigation bar

Demo | Download

LavaLamp for jQuery lovers

Download only.

The nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery JavaScript library.

navigation menu tutorials

Demo | Download

Create Bounce out Vertical menu with jQuery

Coding Tutorial + Download

Make a simple bounce out vertical menu with the help of little bit css3 and jQuery framework. Beautiful navigation menu can distinguish your website from the crowd of creative navigation bars.

navigation

Demo | Download

Vertical Sliding jQuery Menu

Coding Tutorial + Download

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.

navigation tutorial

Demo | Download

The Fanciest Dropdown Menu You Ever Saw

Coding Tutorial + Download

Web designers and developers find themselves creating dropdown menus over and over. I’ve drilled dropdown menu production to a science.

jQuery Tutorial

Demo | Download

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Coding Tutorial + Download

Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of WordPress websites using a tabbed interface for its category, posts, comments and random posts content.

jquery at its best

Demo | Download

Image Menu with jQuery

Coding Tutorial + Download

Imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to jQuery.

jquery tutorial

Demo | Download

jQuery RSS Feed Menus

Coding Tutorial + Download

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abounds.

tuts and guide

Demo | Download

Outside the Box

Coding Tutorial + Download

Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.

tutorial

DemoDownload

Share the Love:


Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Tayyub

Tayyub is the Editor here. He publishes the posts and pages, and coordinates with writers. He takes care of all the words that publish on Designzzz.com
All Articles by
2 Comments on “50 Free jQuery Navigation Bar Plugins and Tutorials” Join The Discussion!
  1. mansi says:

    Amazing Collection. Thanks!

    1. Tayyab says:

      You’re welcome Mansi :)

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved