- March 26, 2015
This is a collection of the best of the best free jQuery menu bar tutorials and plugins. These jQuery plugins can spark-up any web design. This collection includes a selection of jQuery drop down menu, mostly horizontal styled but there is a variety of vertical jQuery menu bars as well.
The most common use for such a menu bar is, of course, navigation.
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 Menu 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.
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.
Demo | Download
jQuery Facets
Download only.
This is a very impressive image based slider like navigation panel.
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.
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.
Demo | Download
Page Scroller
Download + Full Documentation
If you don’t need API and skins, you can get it for free, otherwise $35.
Demo | Download
Ascensor
Download only.
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
Garagedoor Effect Using JavaScript – jQuery Edition
Coding Tutorial + Download
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
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.
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 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).
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.
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.
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.
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.
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
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. 
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
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
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.
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
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.
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.
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.
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.
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.
Demo – Download
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.
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.
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.
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.
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.
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.
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.
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.
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.
