15 Fresh jQuery Menu Plugins and Tutorials

We haven’t actually taken a look at what new techniques and plugins are available for building menus with jQuery in quite a long time. For the most part, the plugins below are a great platform/canvas for you to build your navigation by offering fantastic customization options that allow you to style the system as required and control its functionality.
Other plugins and tutorials, although beautifully crafted, do have limited customization options and may not be suited for a typical site.

Remember, having a well organized and intuitive menu is key to any sites success.

You might also like:
50 jQuery Plugins for Form Functionality, Validation, Security and Customization →
50 Fundamental jQuery Controls, Components and Plugins →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →

naviDropDown 1.0 Plugin

The naviDropDown plugin allows you to create a simple drop down menu, utilizing hoverIntent, and jQuery’s own slideUp and slideDown effects. You can also set the orientation of the drop down to either horizontal (default) or vertical, and set the duration and easing method of both slideUp and slideDown on initiation of the plugin.
naviDropDown 1.0 PluginView the Demo

Drill Down Menu Plugin

This plugin will take any standard nested list and turns it into an iPod-style drill down menu. Drill down menus typically offer an excellent method for managing and organizing large and complicated menus into a small, compact and fixed-sized area. Features of this plugin include: Saved state using cookies, add count of total number of child links to each menu option and offers 2 different methods to navigate (breadcrumb style or back button to return to previous option).
Drill Down Menu PluginView the Demo

Memu – A simple CSS & jQuery Menu

This small and very easy to use jQuery plugin can be used with or without jQuery (if you don’t want any JS on your page, just get the CSS).
Memu – A simple CSS & jQuery MenuView the Demo

Vertical Mega Menu Plugin

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. There are several plugin options available for customizing the mega menu, you can: Choose the animation effect of the flyout menu, set the animation speed, set the number of sub-menus per row, display the flyout mega-menu on the left or right depending on the menu position and more.
Vertical Mega Menu PluginView the Demo

Simple Flickr Style Tooltip Menu

This tutorial will show you how to create a Flickr-style tooltip drop down menu.
Simple Flickr Style Tooltip MenuView the Demo

Mega Drop Down Menu Plugin

This jQuery Mega Drop Down Menu plugin takes any standard HTML nested list and turns it into a horizontal mega menu. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation for any website.
Mega Drop Down Menu PluginView the Demo

Dropdown Google Style Menu

In this tutorial you will be shown how to create a Google-style dropdown menu. If you check the Google source code you will see far too many divs, uls, lis, and span elements, the idea with this tutorial is to do the same but without those extra elements.
Dropdown Google Style MenuView the Demo

Cool Animated Menu

In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Initially learning how to build the concept in Photoshop and then laying out the basic HTML elements, styling everything with CSS and then bringing it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
Cool Animated MenuView the Demo

Vertical Accordion Menu

The plugin takes standard html nested lists and turns them into versatile vertical accordion menus.
Vertical Accordion MenuView the Demo

Horizontal Dropdown Menu

In this tutorial you'll be shown how to create a simple, usable and functional horizontal menu with HTML and CSS. You will also use jQuery to add some drop-down animation to the menu.
Horizontal Dropdown MenuView the Demo

Dropdown Login Form

This is an easy to implement and lightweight simple jQuery dropdown login form.
Dropdown Login FormView the Demo

Flashy Navigation with easing and hoverIntent

With this plugin you can make your navigation a little bit more flashy. It makes use of easing and hoverIntent and you can customize the rollover colors, easing method and duration.
Flashy Navigation with easing and hoverIntentView the Demo

Floating Social Bar with jQuery and CSS

From creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to build a fancy floating bar similar to the Meebo and Wibiya bars.
Floating Social Bar with jQuery and CSSView the DemoView the Demo 2

Expanding Image Menu

In this advanced and unique tutorial you will learn how to 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 clicked.
Expanding Image MenuView the Demo

Animated Content Menu

With this tutorial you will create a slick animated content menu with jQuery. The menu items will be animated and when clicked, a content area with further information will appear and the background image will also change according to which menu item was clicked.
Animated Content MenuView the Demo

Overlay-like Effect

You will create a slick overlay effect with jQuery that does not use an overlay with this tut. The idea is to change the opacity or the color of certain elements in order to make it look like as if you are covering the content with an overlay.
Overlay-like EffectView the Demo

Jquery.ascensor.js

Jquery.ascensor.jsView the Demo