Awesome jQuery Navigation Menu Plugins and Tutorials

25 Absolutely Free Menu Plugins for Any Website

All these plugins can easily be added into any web design project.

Almost all of these have their coding tutorials with them, and some even have Photoshop tutorials as well so you can alter the design and create something which looks nothing like the tutorial result.

I made a jQuery post after a long time, perhaps I should do it rather regularly… what do you think? I’m waiting for your feedback.

One thing I’d like to add here is that even though these plugins are free, and you can use them freely but it’s not a good idea to use them as they are. That’s because many other websites may be using them also. Add your own touch, make a few modifications before using them so they become unique.

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.

Demo | Download

Ascensor

Download

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

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.

Demo | Download

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.

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.

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.

Demo | Download

Memu

Download

A small, JQuery plugin which is quite easy to use. It’s a menu which can be used with or without JQuery (if you dont want any js on your page, just get the css).

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

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

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.

Demo | Download

Tabbed Structure Menu Tutorial

Coding Tutorial + Download

These kind of menus are not always handy, but the clients which like such stuff, but which do, only like this stuff. So you should have it in your design arsenal.

Demo | Download

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.

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.

Demo | Download

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.

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.

Demo | Download

Smooth Animated Menu

Coding Tutorial + Download

This is an old one, and most probably you have seen it before, but anyway…

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.

Demo | Download

Slide Down Box Menu

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.

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.

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.

Demo | Download