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, supports image-based themes
• Fast: Menu container is rendered on page load, and only changes position when rendered (on click event)
• Thoroughly tested: Features extensive set of unit tests to ensure expected behavior

Specification

• Requires: prototype.js 1.6
• Tested browsers: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+
• Last modified on: 12/03/07
• Latest version: 0.6
• Author: kangax

SVN

• The extension now has a public svn (google code)

Demo

• Right click anywhere on a page to bring up a menu. Use "Ctrl + Left Click" if you're in Opera.

How to use it

1. Download proto.menu.0.6.js and include it in your page
   

   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/proto.menu.0.6.js"></script>
   

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

   <link rel="stylesheet" href="proto.menu.0.6.css" type="text/css" media="screen" />
   

3. Create an array of links to display in a menu
   

   var myMenuItems = [
     {
       name: 'Edit',
       className: 'edit', 
       callback: function() {
         alert('Forward function called');
       }
     },{
       name: 'Copy',
       className: 'copy', 
       callback: function() {
         alert('Copy function called');
       }
     },{
       name: 'Delete', 
       disabled: true,
       className: 'delete'
     },{
       separator: true
     },{
       name: 'Save',
       className: 'save',
       callback: function() {
         alert('Saving...');
       }
     }
   ]
   

4. Initialize Proto.Menu class passing array of links

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

Version history

• v 0.6 [12/03/07]
  • Upgraded to 1.6
  • Added iframe shim to prevent <select> elements having higher z-index than menu (in IE6)
  • Added "beforeShow", "beforeHide" and "beforeSelect" callbacks
  • Added zIndex option
  • Event object is now passed into each callback as a first argument
  • It is now possible to assign className to any menu item (useful for image based themes)
  • The menu's markup is now much more semantic and accessible
• 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
• 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.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.2: [6/15/07] Opera is now supported through Ctrl + Left Click
• v 0.1: [4/15/07] Initial release

P.S.

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