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





How to use it

  1. Download and include it in your page
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/"></script>
  2. There's an optional CSS file if you do not wish to style menu yourself
    <link rel="stylesheet" href="" 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() {
  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

Version history