ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools javascript framework. ContextMenu allows you to offer stylish, functional context menus on your website.

MooTools Javascript Class

/*
Script: ContextMenu

License: MIT-style license.

Copyright: Copyright (c) 2007-2009 [David Walsh](http://davidwalsh.name/).

Author: David Walsh (http://davidwalsh.name)
*/
var ContextMenu = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		actions: {},
		menu: 'contextmenu',
		stopEvent: true,
		targets: 'body',
		trigger: 'contextmenu',
		offsets: { x:0, y:0 },
		onShow: $empty,
		onHide: $empty,
		onClick: $empty,
		fadeSpeed: 200
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);

		//option diffs menu
		this.menu = document.id(this.options.menu);
		this.targets = $$(this.options.targets);

		//fx
		this.fx = new Fx.Tween(this.menu, { property: 'opacity', duration:this.options.fadeSpeed });

		//hide and begin the listener
		this.hide().startListener();

		//hide the menu
		this.menu.setStyles({ position:'absolute',top:'-900000px',display:'block' });
	},

	//get things started
	startListener: function() {
		/* all elemnts */
		this.targets.each(function(el) {
			/* show the menu */
			el.addEvent(this.options.trigger,function(e) {
				//enabled?
				if(!this.options.disabled) {
					//prevent default, if told to
					if(this.options.stopEvent) { e.stop(); }
					//record this as the trigger
					this.options.element = document.id(el);
					//position the menu
					this.menu.setStyles({
						top: (e.page.y + this.options.offsets.y),
						left: (e.page.x + this.options.offsets.x),
						position: 'absolute',
						'z-index': '2000'
					});
					//show the menu
					this.show();
				}
			}.bind(this));
		},this);

		/* menu items */
		this.menu.getElements('a').each(function(item) {
			item.addEvent('click',function(e) {
				if(!item.hasClass('disabled')) {
					this.execute(item.get('href').split('#')[1],document.id(this.options.element));
					this.fireEvent('click',[item,e]);
				}
			}.bind(this));
		},this);

		//hide on body click
		document.id(document.body).addEvent('click', function() {
			this.hide();
		}.bind(this));
	},

	//show menu
	show: function() {
		this.fx.start(1);
		this.fireEvent('show');
		this.shown = true;
		return this;
	},

	//hide the menu
	hide: function() {
		if(this.shown)
		{
			this.fx.start(0);
			this.fireEvent('hide');
			this.shown = false;
		}
		return this;
	},

	//disable an item
	disableItem: function(item) {
		this.menu.getElements('a[href$=' + item + ']').addClass('disabled');
		return this;
	},

	//enable an item
	enableItem: function(item) {
		this.menu.getElements('a[href$=' + item + ']').removeClass('disabled');
		return this;
	},

	//diable the entire menu
	disable: function() {
		this.options.disabled = true;
		return this;
	},

	//enable the entire menu
	enable: function() {
		this.options.disabled = false;
		return this;
	},

	//execute an action
	execute: function(action,element) {
		if(this.options.actions[action]) {
			this.options.actions[action](element,this);
		}
		return this;
	}

});

Class: ContextMenu

Implements:

Options, Events

ContextMenu Method: constructor

Notes:

• ContextMenu debuted Thursday, January 29, 2009 on the David Walsh Blog: http://davidwalsh.name/mootools-context-menu
• ContextMenu requires MooTools Core only -- no MooTools More dependencies.
• Visit http://davidwalsh.name/js/contextmenu for example usages.

Syntax:

var myContextMenu = new ContextMenu(options);

Arguments:

1. options - (object, optional) Initial options for the class.

Options:

• actions - (object, defaults to {}) The set of action names and functions to be executed.
• fadeSpeed - (integer, defaults to 200) The speed at which the menu should fade in and out.
• menu - (string, defaults to 'contextmenu') The ID of the element that represents the menu XHTML.
• offsets - (object, defaults to {x:0,y:0}) The offset position of the context menu.
• stopEvent - (boolean, defaults to true) Denotes if the event should be stopped when the menu is triggered to display.
• targets - (string, defaults to 'body') The elements that the context menu will be triggered by.
• trigger - (string, defaults to 'contextmenu') The event which will trigger the display of the context menu.

Returns:

• (object) A new ContextMenu instance.

Events:

show

• (function) Function to execute when the menu is shown

Signature

onShow()

hide

• (function) Function to execute when the menu is hidden

Signature

onHide()

click

• (function) Function to execute when any menu item is clicked

Signature

onClick(item,event)

Arguments:

1. item - (Element) The element that was clicked.
2. event - (Event) The event object.

this.ContextMenu Method: disableItem {#this.ContextMenu:disableItem}

Disables a ContextMenu menu item.

Syntax:

menu.disableItem('copy');

Arguments:

1. item - (string) The name of the item to disable. (The element in the menu with the "#copy" href)

Returns:

• (object) The ContextMenu instance.

this.ContextMenu Method: enableItem {#this.ContextMenu:enableItem}

Enables a ContextMenu menu item.

Syntax:

menu.enableItem('copy');

Arguments:

1. item - (string) The name of the item to enable. (The element in the menu with the "#copy" href)

Returns:

• (object) The ContextMenu instance.

this.ContextMenu Method: disable {#this.ContextMenu:disable}

Disables the ContextMenu instance.

Syntax:

menu.disable();

Returns:

• (object) The ContextMenu instance.

this.ContextMenu Method: enable {#this.ContextMenu:enable}

Enables the ContextMenu instance.

Syntax:

menu.enable();

Returns:

• (object) The ContextMenu instance.