Simple jQuery Context Menu Using jQuery UI - CustomMenu

CustomMenu is a simple jQuery plugin that uses jQuery UI menu component to create a right-click context menu within any html element. The plugin comes with a filter option that allows menu to be linked to specific elements within the main item (ie cells within a table).

Basic Usage:

1. Include jQuery javascript library and jQuery customMenu plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery_custommenu.js"></script>

2. Include jQuery UI's files in the page.

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

3. Create a context menu within a container.

<p id="demo">
<span>Right Click Me</span>
</p>

4. Add the menu items in the javascript and call the plugin with options.

var options = [
{id:1,label:'Ireland'},
{id:2,label:'England',options:[
	{id:5, label:'Brighton'},
	{id:6, label:'London'},
	{id:7, label:'Manchester'}
]},
{id:3,label:'France'},
{id:4,label:'Germany'}
]

$(document).ready(function() {
$('#demo').customMenu({
filter: 'span',
option_list_callback: function() {
return options;
},
});
});

Change logs:

2014-11-21

• Update to handle clearing the menu better from within IE

2014-10-15

• Update to improve handling of mouse clicks which should hide the current menu

2014-09-24

• Update to style properly for jQuery UI 1.11.1

2014-08-04

• Update to return menu item selected

---

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