Awesome jQuery Navigation Menu Plugins and Tutorials

Awesome jQuery Navigation Menu Plugins and Tutorials

AD

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.

free download

Demo | Download

Ascensor

Download

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

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

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).

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

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.

jquery

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.

free

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.

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

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

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.

free plugin

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.

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

Further Related Readings

Tayyab

Tayyab is the Editor at Designzzz. He also teaches design, and he is learning to become a documentary director. When he's not working, he's out doing photojournalism.
All Articles by
6 Comments on “Awesome jQuery Navigation Menu Plugins and Tutorials” Join The Discussion!
  1. Abu says:

    Super….

  2. Lee says:

    Hi,

    Thanks for listing our plugins – horizontal and vertical mega menus!

    1. Tayyab says:

      Well you have done brilliant work with your codes, If you just make visible buttons for “Demo” and “Download”, the site has potential to compete with the very best of the industry.
      I have bookmarked your site and will keep featuring your stuff more regularly. :)

  3. Malc510 says:

    nice…awesome

  4. reynold says:

    brilliant, it helps me alot!

  5. acorrea says:

    awesome!!!!!

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved