Logo
doctype [?]
[strict] [loose] [none]

jQuery ContextMenu Plugin


This is a jQuery plugin to create context (right-click) menus. The primary use for this is for web applications rather than the general web.

Learn By Example

Detailed Examples With Themes

These are examples that show some of the functionality of the ContextMenu plugin and included themes.

Right-click to view the menu.

Simple title:function menu

The easiest way to define a context menu is to use JSON to define the options and what each does. The JSON structure is simply an Array with the options specified in order.

var menu1 = [ {'Option 1':function(menuItem,menu) { alert("You clicked Option 1!"); } }, $.contextMenu.separator, {'Option 2':function(menuItem,menu) { alert("You clicked Option 2!"); } } ]; $(function() { $('.cmenu1').contextMenu(menu1,{theme:'vista'}); });
Right-click here to trigger the context menu

Pre-defined HTML menu

If you have defined your context menu content in HTML, you can simple pass a jQuery selector to identify it, and it will be used.

<div id="menu2" style="display:none;width:200px;background-color:white;border:1px solid black;padding:5px;"> This is my custom context menu </div>
$(function() { $('.cmenu2').contextMenu('#menu2'); });
Right-click here to trigger the context menu

Customized option properties

If you want more control over a certain menu option, you can pass an {Object} instead of a function.

var menu3 = [ {'Show Alert':{ onclick:function(menuItem,menu) { alert("You clicked me!"); }, className:'menu3-custom-item', hoverClassName:'menu3-custom-item-hover', title:'This is the hover title' } }, {'Delete':{ onclick:function(menuItem,menu) { if(confirm('Are you sure?')){$(this).remove();} }, icon:'delete_icon.gif', disabled:false } }, {'Custom Hover Functions':{ hoverItem:function(c) { $(this).addClass(c).find('div').html('You just hovered over me!'); }, hoverItemOut:function(c) { $(this).removeClass(c).find('div').html('Sorry to see you go!'); } } }, {"You can't click me!":{disabled:true} } ]; $(function() { $('.cmenu3').contextMenu(menu3,{theme:'vista'}); });
.menu3-custom-item { font-size:16px !important; font-weight:bold; padding:3px; } .menu3-custom-item-hover { border:2px solid black; padding:1px; }
Right-click here to trigger the context menu

Menu item callbacks

When a menu item is clicked, the function specified in the JSON object is called with two arguments: menuItem, menu.

The first argument, menuItem is a reference to the DIV object that contains the option.

The second argument, menuObject is a reference to the menu object containing all the options, the menu itself, etc.

Inside the function, this will refer to the DOM object that triggered the contextmenu event.

If the function returns false, then the menu will not close after the option has been clicked.

var menu4 = [ {'Modify Option When Clicked':function(menuItem,menuObject) { $(menuItem).css({'backgroundColor':'red'}); return false; } }, {'Modify Target When Clicked':function(menuItem,menuObject) { $(this).css({'backgroundColor':'red'}); return false; } }, // menuObject is the $.contextMenu structure, and menu is a property of thet object which references the menu DOM object {'Modify Menu Object When Clicked':function(menuItem,menuObject) { $(menuObject.menu).css({'width':'500px'}); return false; } } ]; $(function() { $('.cmenu4').contextMenu(menu4); });
Right-click here to trigger the context menu

Themes

The structure of the HTML menu built by the plugin is as seen below. Values in red depend on options.

The whole thing is wrapped in a table cell because that allows the width to be flexible.

The default themes can be seen at the top of this page. Creating a new theme is as simple as creating some CSS rules and optionally adding images.

<table cellspacing=0 cellpadding=0>
<tr>
<td>
<div class="context-menu context-menu-theme-xp" [hover] [click]>
<div class="context-menu-item">
<div class="context-menu-item-inner" style="background-image:url(i_save.gif)"> Option Text</div>
</div>
</div>
</td>
</tr>
</table>

Customizing menu, shadow positions and options

Positions of the menu and shadow can be easily customized be setting options.

// Build a menu var menu5 = []; for (var i=1; i<10; i++) { var o={}; o['Option #'+i]=function(){}; menu5.push(o); } $(function() { $('.cmenu5-1').contextMenu(menu5,{offsetX:20, offsetY: 20}); $('.cmenu5-2').contextMenu(menu5,{shadowColor:'red',shadowOffsetX:3,shadowOffsetY:12,shadowWidthAdjust:3,shadowHeightAdjust:12}); $('.cmenu5-3').contextMenu(menu5,{direction:'up',shadowColor:'green',shadowOffset:-7,shadowWidthAdjust:12,shadowHeightAdjust:12,shadowOpacity:.6}); });
20 pixel offset Ridiculous Red Shadow Green Upwards Menu

Modifying the menu before showing

By defining a "beforeShow" function you can modify the menu before each time it is displayed. This may be useful to disable some elements depending on the item clicked, for example, or to do any other kind of custom processing needed for the menu.

var menu6 = []; for (var i=1; i<10; i++) { var o={}; o['Option #'+i]=function(){}; menu6.push(o); } $(function() { $('.cmenu6').contextMenu(menu6, { // Randomly enable or disable each option beforeShow: function() { $(this.menu).find('.context-menu-item').each(function() { if (Math.random()<.5) { $(this).toggleClass("context-menu-item-disabled"); } }); } } ); });

Each time you activate the context menu below, random options will be enabled or disabled.

Right-click here to trigger the context menu

Changing display animation

The animation used to show/hide the menu can be changed. By default it simply uses the jQuery show() and hide() methods. You can change the showTransition and hideTransition options to specify other animations such as fadeIn, slideIn, fadeOut, slideOut. If other animations are defined in the $.fn namespace you can use those also. The showSpeed and hideSpeed options can also be specified to control the duration of the animations.

// Build a menu var menu7 = []; for (var i=1; i<10; i++) { var o={}; o['Option #'+i]=function(){}; menu7.push(o); } // Create a custom show/hide animation $.fn.myCustomShow = function(speed,callback) { // First position it up and to the left so we can fly in var top = parseInt(this.css('top'))-500; var left = parseInt(this.css('left'))-500; this.css({'top':top,'left':left,opacity:0.0}); this.show(); this.animate({'top':'+=500','left':'+=500','opacity':1},speed,null,callback); }; $.fn.myCustomHide = function(speed,callback) { this.animate({left:'-=500',top:'-=500',opacity:0.0},speed,null,callback); }; $(function() { $('.cmenu7-1').contextMenu(menu7,{showTransition:'slideDown',hideTransition:'slideUp',useIframe:false}); $('.cmenu7-2').contextMenu(menu7,{showTransition:'fadeIn',hideTransition:'fadeOut',useIframe:false}); $('.cmenu7-3').contextMenu(menu7,{showTransition:'myCustomShow',hideTransition:'myCustomHide',showSpeed:500,hideSpeed:500,useIframe:false,shadow:false}); });
slideDown/slideUp fadeIn/fadeOut Custom show/hide functions

Dynamic menu items

The entire contents of the menu can be built at run-time by passing a function instead of a JSON object.

$(function() { $('.cmenu8').contextMenu( function() { var d = new Date(); var o1 = {}; o1[d.toString()]=function(){}; d.setDate(d.getDate()+1); var o2 = {}; o1[d.toString()]=function(){}; d.setDate(d.getDate()+1); var o3 = {}; o1[d.toString()]=function(){}; return [ o1,o2,o3 ]; } ); });

Each time this menu is displayed, the options are built before showing. The first option is the current time, and the next two options are each one day later.

Right-click here to trigger the context menu

Show/hide callbacks

You can define functions to call after a menu is shown or hidden. This can be useful especially if the show/hide animation is slow.

var menu9 = []; for (var i=1; i<10; i++) { var o={}; o['Option #'+i]=function(){}; menu9.push(o); } $(function() { $('.cmenu9').contextMenu(menu9, { showSpeed:1000, hideSpeed:1000, showTransition:'fadeIn', hideTransition:'fadeOut', showCallback:function() { alert('Done showing'); }, hideCallback:function() { alert('Done hiding'); } }); });
Right-click here to trigger the context menu

Overriding built-in behavior for all menus or per instance

Any methods or properties of the contextMenu object can be overidden on a per-instance by passing it in the options when the menu is applied. This gives total control to you to tweak any of the behavior that needs it in your application. There should never be a need to modify the original source!

You can also modify the "template" object and change the behavior for all menu instances created.

$.contextMenu.shadow=false; // Turn off shadows for all menus created $('div').contextmenu(menu,{shadow:true}); // Turn it back on for this instance // Customize the function that positions the menu for all created instances. // Your layout or CSS may require tweaks to the positioning code, and you of course don't want to modify the plugin source! $.contextMenu.getPosition = function(clickX,clickY,cmenu,e) { ... } // Make all created menus use the 'xp' theme by default $.contextMenu.theme='xp';

See the documentation for methods, properties, arguments, and expected return values.