Simple jQuery Custom Context Menu Plugin

Audero Context Menu is a lightweight and cross-browsers jQuery plugin for creating custom context menus on right click or left click. Click outside the menu area and the menu will disappear.

See also:

• jQuery Right-click Menu Plugin - ContextMenu

Basic Usage:

1. Include the latest jQuery library and jQuery Audero Context Menu Plugin on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../src/js/jquery.auderoContextMenu.js"></script>

2. The CSS

ul.audero-context-menu {
position: absolute;
z-index: 1000;
display: none;
background-color: menu;
list-style-type: none !important;
margin: 0px !important;
padding: 0px !important;
}
ul.audero-context-menu * {
color: menutext;
}
ul.audero-context-menu > li {
border: 1px solid black;
margin: 0px !important;
padding: 2px 5px !important;
}
ul.audero-context-menu > li:hover {
background-color: activecaption;
}
ul.audero-context-menu > li a {
display: block;
}

3. The Html

<div id="demo">
...
</div>
<ul id="context-menu" class="audero-context-menu">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

4. Call the plugin

<script type="text/javascript">
$(document).ready(function() {
$("#demo").auderoContextMenu("context-menu");
});
</script>

5. Options and defaults.

// string (required). 
// The id of the menu that has to be shown
idMenu: null,       

// number (optional). 
// The X coordinate used to show the menu 
posX: null,      

// number (optional). 
// The Y coordinate used to show the menu    
posY: null,          

// boolean (optional). 
// If the menu has to be shown also on mouse left button click
bindLeftClick: false 

Change log:

v2.4.2 (2016-01-25)

• Updated

v2.2.1 (2014-05-06)

• Updated the demo to include the `destroy()` method

v2.2.1 (2014-05-06)

• Updated the demo to include the `destroy()` method

v2.0.3 (2014-01-12)

• version update

---

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