Menu is used to provide convenient access to various operations such as quitting a program, or manipulating data. It is the heart of the navigation for any website. Menu Plugins let you create attractive and intuitive animated menu. If you want to find exciting menu stuffs and integrate some of them into your web pages, this is a collection you could not afford to neglect.
Proto.Menu: Prototype-based Context Menu Solution
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. It is about 2 KB ( 1.5 KB Minified). It is Unobstrusive which plays nice with Javascript turned off and uses its own namespace, so it won’t messed up with your codes. The menu styling can be easily defined in external CSS. It is also a Full A-Graded browsers support (Opera is supported through Ctrl + Left Click). It looks very tidy and suitable for web applications with context menu.
|
|
ProtoFish: advanced hover menu based on Prototype
ProtoFish is an advanced hover menu based on Prototype. You can easily add a delay to your menu (on mouseout) and choose your own hover class. All ProtoFish menu’s are keyboard accessible conform ARIA best practices. On top of that: it’s fully customizable and free to use!
e24TabMenu – Drop down AJAX menu
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
|
|
An incrementally loading menu API in JavaScript, utilizing Ajax, asynchronous HTTP requests.
|
|
Control.ContextMenu provides a simple API for programming contextual menus with Prototype. You can attach a context menu to the entire document or any Element. Menus can be triggered via a right click (default), or left click.
Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.
This little example shows how to make really simple and yet very nice CSS Menu with slider.
|
|
Flash like menu rollover using jQuery
Hover above and feel for yourself, 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.
|
|
Create Slick Navigations Easily: jQuery Menu
jQuery Menu is a solid menu system that helps creating dropdown, iPod drilldown and flyout styled navigations easily. It is the updated & much improved version of the iPod-like menu. The menu system uses a hierarchical unordered list for creating the menus & sub-menus. It is ready with ThemeRoller which makes it very easy to customize the look and has ARIA (Accessible Rich Internet Applications Suite) support. With various configuration options & ease of use, jQuery Menu is definitely a very helpful solution for creating menus.
Smooth image transition on menu rollover using MooTools
So far Flash had been the primary tool for adding any jazz/animation effects to a website, recently Prototype/jQuery & MooTools have included animation effects which can rival that of Flash. This script adds smooth transition effects on menu rollover using MooTools. Check out the demo to realize the elegance of the script.
Elastic thumbnail menu using jQuery
Simple thumbnail menu using jQuery which resembles a fish-eye menu in Mac.
Fancy Sliding Tab Menu using Script.aculo.us
The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
dropSlideMenu – Sliding Dropdown Menu – jQuery Plugin
dropSlideMenu is a simple yet easily and highly-customizable drop-down menu with an attractive sliding effect using jQuery.
|
|
Garagedoor Menu Effect – jQuery Plugin
For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!
Simple Animated Menu – MooTools Plugin
Curious how to build something like the menu featured on this site for your next web design project? To make the menu, you won’t even have to muck about in javascript.
|
|
Fisheye Menu – MooTools Plugin
Nice Fisheye style menu using MooTools Plugin.
nmcDropDown: A Drop-Down Menu Plugin for jQuery
You should create your navigation as a nested unordered list. Linking the top-level items is optional and will not change the working of the plugin. You should style your menu first with css. How you do that is up to you, but you should set the sub-menus to display: none (this is actually optional, but will prevent the sub-menus from flashing on page-load).
jQuery Context Menu is a context menu plugin for jQuery. It was designed to make implementing context menu functionality easy and requires minimal effort to configure. The goal of this plugin is to streamline the way actions are binded to menu items and to use 100% CSS for styling. Keyboard shortcuts were added for navigating the menu once it’s open, and there are five methods to allow you to control and clean-up context menus on the fly.
|
|
In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!
Horizontal menu, reveals more of the image as you rollover it.
 |
This plugin has been updated to work with Mootools 1.2. New features include automatic calculation of widths so you no longer need to define them in the css if you don’t want to. Additionally, you can attach your own events when the menus are shown and hidden, and it’s easier to change the speed of the animation (sorry, you can’t change the type). The css file is also organized a lot better, allowing you to located exactly what you can and can’t change.
BySlideMenu – Nice and Powerful Accordion Menu
BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text.
|
|
Simple Animated Menu for Mootools 1.2
Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users – the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won’t even have to muck about in javascript. 
MenuMatic Vertical & Horizontal Menu
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.
ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools javascript framework. ContextMenu allows you to offer stylish, functional context menus on your website.
 |
The UvumiTools Dropdown Menu is a very simple multi-level menu built from an HTML unorderd list, using Mootools Javascript Framework. We needed a simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element. Horizontal menus are great because they are small, but the number of items they can contain is limited to the document’s width. Dropdown menus allow you to squeeze many items in a thin horizontal menu by using sub-menus; The main menu (the top-level <ul>) is rendered horizontally, while the sub-menus (inner <ul> elements) are displayed as vertical sub-menus when hovered. All you need is an unordered list, with links to sections of your site, and our Dowpdown script. We are aware that there are many dropdown menu scripts for every Javascript framework out there, but we wouldn’t use someone else’s script on a plugin site, and we wanted to make one according to our requirements: non-obtrusive, based on valid HTML, cross-browser compatible and syllable with CSS.
Fancy Sliding Menu For Mootools
Due to the popularity of the script.aculo.us version of the Fancy Sliding Menu I decided a Mootools version was now in order. It looks exactly the same as the the script.aculo.us, it works exactly the same as the script.aculo.us version, the only difference is it runs on Mootools.
iFishEye is an open source (free) javascript tool for creating a fisheye lens effect. Handling a long list of contents is one of the oldest problems in browsing. Probably scrolling is the most common behavior to solve this problem, but after Mac OS X Dock another approach is becoming very popular. This is when FishEye effect comes to us, it can hold any number of items, and resizes them dynamically to fit while using magnification to clarify smaller resized items. iFishEye goal is to bring the FishEye effect into the web and provide an easy development alternative for content displaying with standard compliant XHTML and unobtrusive JavaScript.
Mac Like Dock Menu with jQuery Plugin – jqDock
The Dock – as anyone familiar with a Mac will know – is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. A Free jQuery Plugin to transform images into Mac Like Dock Menu. This gives you freedom to choose your own orientation, you can have menus in horizontal or vertical order with icons that expands on rollover. This free jQuery dock menu plugin also give options to choose whether you want to use lablels or not.
Creating an Accordion Menu is trivial using Accordion Content script. It basically just comes down to styling your headers and expanding content to conform to that desired menu look.
  |
For help, advice, tips and tricks, challenges, feel free to visit our
or Submit your good resource to share.
Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.
