Easy SEO-friendly Context Menu jQuery Plugin - contextMenu.js

A lightweight and flexible jQuery plugin that makes it easy to add context menus to any DOM element on your page.

All you have to do is to create a regular HTML unordered list that will appear when the user right-clicks on the element.

How to use it:

1. Download and load the jQuery contextMenu.js plugin's files in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.contextmenu.js></script>
<link href="/path/to/jquery.contextmenu.css" rel="stylesheet" />

2. Create an HTML list for the context menu.

<ul id="myMenu" class="contextMenu">
  <li class="edit"><a href="#edit">Edit</a></li>
  <li class="cut separator"><a href="#cut">Cut</a></li>
  <li class="copy"><a href="#copy">Copy</a></li>
  <li class="paste"><a href="#paste">Paste</a></li>
  <li class="delete"><a href="#delete">Delete</a></li>
  <li class="quit separator"><a href="#quit">Quit</a></li>
</ul>

3. Append the context menu to the element you specify. That's it.

$("#target").contextMenu({
  menu: 'myMenu'
},
  function(action, el, pos) {
  // onClick callback
  alert(
    'Action: ' + action + '\n\n' +
    'Element ID: ' + $(el).attr('id') + '\n\n' + 
    'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
    'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
    );
});

4. Add custom icons to the menu items.

.contextMenu li.edit a { 
  background-image: url(edit.png); 
}

/* ... */

5. Enable/disable the context menu.

$('#target').disableContextMenu();
$('#target').enableContextMenu();

6. Enable/disable a specific menu item.

$('#target').disableContextMenuItems('#cut,#copy');
$('#target').enableContextMenuItems('#cut,#copy');

---

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