We haven’t actually taken a look at any new jQuery menu plugins 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.
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
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
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
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
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
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
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
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
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
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
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
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