Tiny Multi-level Context Menu Plugin - jcontextmenu

A lightweight, convenient jQuery context menu plugin which shows a dynamic, multi-level menu when you right click on a specific container. Also can be used to override the browser's right-click menu with a custom one of your own.

How to use it:

1. Load the style sheet jcontextmenu.css in the header of the html page that will provide the default CSS styles for the context menu.

<link href="jcontextmenu.css" rel="stylesheet">

2. Load jQuery library and the JavaScript file jcontextmenu.js at the end of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jcontextmenu.js"></script>

3. Call the function on the target element and create you menu items as an array of JS objects as follows:

$('#el').jcontextmenu({
  menus: [
    { type: 'menuitem', id: 'menuitem1', text: 'Item 1', handler: function (event) { alert('You just clicked Item 1'); } },
    {
      type: 'menuitem', id: 'menuitem2', text: 'Item 2', submenus: [
        { type: 'menuitem', id: 'menuitem21', text: 'Item 2-1', handler: function (event) { alert('You just clicked Item 2-1'); } },
        { type: 'menuitem', id: 'menuitem22', text: 'Item 2-2', handler: function (event) { alert('You just clicked Item 2-2'); } }
      ]
    },
    { type: 'separator' },
    {
      type: 'menuitem', id: 'menuitem3', text: 'Item 3', submenus: [
        { type: 'menuitem', id: 'menuitem31', text: 'Item 3-1', handler: function (event) { alert('You just clicked Item 3-1 '); } },
        {
          type: 'menuitem', id: 'menuitem32', text: 'Item 3-2', submenus: [
            { type: 'menuitem', id: 'menuitem321', text: 'Item 3-2-1', handler: function (event) { alert('You just clicked Item 3-2-1 '); } },
            { type: 'menuitem', id: 'menuitem322', text: 'Item 3-2-2', handler: function (event) { alert('You just clicked Item 3-2-2 '); } }
          ]
        }
      ]
    },
    { type: 'separator' },
    { type: 'menuitem', id: 'menuitem4', text: 'Item 4', handler: function (event) { alert('You just clicked Item 4'); } },
  ]
});

4. Callback functions available.

$('#el').jcontextmenu({
  onStart: function () { },
  onStop: function () { }
});

---

This awesome jQuery plugin is developed by caojianping. For more Advanced Usages, please check the demo page or visit the official website.