• Read our blog
• Submit issues
• Roadmap and changelog

Overview

jQuery Context Menu is a context menu plugin for jQuery. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.

Why reinvent the wheel? The goal of this plugin is to streamline the way actions are bound to menu items and to use 100% CSS for styling. Keyboard shortcuts were added for navigating the menu once it’s open, and there are five methods to allow you to control and clean-up context menus on the fly.

Contents

• Features
• Compatibility
• Demo
• Download
• Usage
  • Dependencies
  • Creating
  • Methods
  • Styling
  • Callback
• To Do List
• Licensing & Terms of Use

Features

• Valid XHTML
• Fully customizeable via CSS
• Easy to configure and implement
• Degrades gracefully
• Keyboard shortcuts to maximize accessibility
• Ability to enable/disable menu items on the fly
• Ability to enable/disable entire menu on the fly

Compatibility

Updated for jQuery 1.4.x! This plugin requires jQuery 1.3 or above and has been tested to work in the following browsers:

• Internet Explorer 6 & 7
• Firefox 2 & 3
• Safari 3
• Chrome
• Opera 9.5*

*Opera 9.5 has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

Demo

View a live demonstration of the context menu plugin.

Download

Current version: jQuery Context Menu – Version 1.01 (10 March 2010)

This plugin is provided to you as-is, at absolutely no cost. If you would like to support its development, feel free to contribute any amount you prefer via PayPal. As always, you are welcome to contribute code for bug fixes and feature enhancements as well. Either way, thanks for supporting our efforts!

Usage

Dependencies

jQuery Context Menu requires jQuery 1.3 or above.

Creating

First, create a list in your HTML that will be the markup for your context menu:

Actions are specified in the href attribute, preceeded by a # symbol. When selected, this is what will be passed back to the actionparameter in the callback. You can add class attributes to the list items to assist with styling, but they have no functional meaning. Thus, class names do not have to correspond with actions.

Once you have created the markup for the context menu, bind it to one or more elements using JavaScript:

Make sure you change #selector to the appropriate jQuery selector that matches the element(s) you want to bind the context menu to. The selector can be any valid jQuery selector.

Methods

There are five methods you can use to control and clean-up the context menu after it has been instantiated.

Method	Description
disableContextMenu()	Disables the context menu on all matching elements
enableContextMenu()	Re-enables the context menu on all matching elements
disableContextMenuItems(”#option1,#option2,…”)	Disables the specified options on all matching elements. If null is passed, all elements will be disabled.
enableContextMenuItems(”#option1,#option2,…”)	Enables the specified options on all matching elements. If null is passed, all elements will be enabled.
destroyContextMenu()	Unbinds the context menu from all matching elements

As an example, to disable the context menu on a div with an ID of myDiv the code would look like this:

Styling

The context menu relies 100% on CSS for styling. To give your users an aesthetically pleasing experience, you should either use the included stylesheet or create your own. Refer to jquery.contextMenu.css to make any changes in the styles.

Callback

The callback function fires if and only if a user makes a valid selection from the context menu. Three arguments are passed which you can use to control what happens when a user makes a selection:

Parameter	Description
action	The action that corresponds to the menu item that was selected (I.E. the href attributes less the #symbol)
el	The element object that triggered the context menu
pos.x	Horizontal position of mouse cursor when menu was clicked (relative to the element)
pos.y	Vertical position of mouse cursor when menu was clicked (relative to the element)
pos.docX	Horizontal position of mouse cursor when menu was clicked (relative to the document)
pos.docY	Vertical position of mouse cursor when menu was clicked (relative to the document)

See the example above for starter code.

Licensing & Terms of Use

This plugin is dual-licensed under the GNU General Public License and the MIT License and is copyright 2008 A Beautiful Site, LLC.

TweetShare