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.

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.

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.