Description

Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page

Features:

• Lightweight: ~3 KB (~2 KB minified)
• Unobtrusive: Plays nice with JS turned off, uses its own namespace
• Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
• Fully customizable: Menu styling can (and is intended to) be easily defined in external stylesheet
• Fast: Menu container is rendered on page load, and only changes position on click

Specification

• Requires: prototype.js 1.6.0_rc0
• Tested browsers: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+
• Last modified on: 8/22/07
• Latest version: 0.5
• Author: kangax

How to use it

• Download Proto.Menu.js (or minified version) and include it in your page

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/Proto.Menu.js"></script>

• There's an optional CSS file if you do not wish to style menu yourself

<link rel="stylesheet" href="Proto.Menu.css" type="text/css" media="screen">

• Create array of links to display in a menu<br/>

var myLinks = [
	{name: 'Back', callback: function(){alert('back function called')}},
	{name: 'Forward', callback: function(){alert('Forward function called')}},
	{separator: true},
	{name: 'Reload', callback: function(){alert('Reload function called')}},
	{name: 'Disabled option', disabled: true},
	{name: 'Toggle previous option', callback: function(){
		var item = oLinks.find(function(l){return l.name == 'Disabled option'});
		item.disabled = item.disabled == false ? true : false;
	}}
]

• Initialize Proto.Menu class passing array of links

<script type="text/javascript">
new Proto.Menu({
	selector: '.contextmenu' // context menu will be shown when element with class name of "contextmenu" is clicked
	className: 'myContextMenu', // this is a class which will be attached to menu container (used for css styling)
	menuItems: myLinks // array of menu items
})
</script>

Version history

• v 0.1: [4/15/07] Initial release
• v 0.2: [6/15/07] Opera is now supported through Ctrl + Left Click
• v 0.3: [6/16/07]
• Links are now passed as Object of "key: value" pairs instead of an array
• Added "disabled option" functionality
• Upgraded prototype version to 1.5.1

• v 0.4: [8/19/07]
• Completely rewritten to utilize prototype 1.6 (leading to smaller size with more features)
• Menu item is now an object with following attributes:
• name: menu item name to display in a menu
• callback: function to call on click
• disabled: true/false indicating disabled option
• separator: true/false indicating separator
• Menu container now stays within viewport right border

• v 0.5 [8/22/07]
• Added Scriptaculous' "fade: true|false" option. When set to true, uses Effect.Appear when showing a menu container
• Menu now stays within any viewport border
• Added google theme

P.S.

• Found a bug or have a suggestion? Let me know