CtxMenu (Javascript)

A modern, light weight, object oriented solution for adding right click context menus for your website.

demo

Installation

1. Download the latest version
2. Upload the CtxMenu folder to your server
3. Add the script to the html code of the pages where you'd like to use it

<script src="./ctxmenu.min/ctxmenu.min.js"></script>

Note: You must ensure the "src" points to the location of the script on your server.

Getting Started

The basic setup of a menu:

// Initialize a context menu for the entire page
var contextMenu = CtxMenu();

// Add an item to the menu
contextMenu.addItem("Hello World", function(){
  alert("Hello World!")
  });

Documentation

CtxMenu Initialization:

// Examples of different ways to initialize a context menu:

// Initialize a context menu for the entire page
var myContextMenu = CtxMenu();

// Initialize a context menu for a element defined by it's id
var myContextMenu = CtxMenu("#example");

// Initialize a context menu for a element defined by it's class
var myContextMenu = CtxMenu(".example");

// Initialize a context menu for all types of a certain element by using a nodeName
// The example below will create a context menu for all paragraphs on the page (<p></p>)
var myContextMenu = CtxMenu("p");

// Initialize a context menu for a element variable
var myElement = document.getElementById("example");
var myContextMenu = CtxMenu(myElement);

CtxMenu Functions:

addItem( text, function, ?icon, ?index )

Appends a new item to the menu.

myItem = myContextMenu.addItem("Text Here", myFunction, icon = "myIcon.png", index = 0);

addSeparator( ?index )

Adds a horizontal line to the menu

mySeparator = myContextMenu.addSeparator(index = 1);

getItems()

Get all items in the context menu.

myItems = myContextMenu.getItems();

getItemAtIndex( index )

Get the DIV of an item based on the index. This includes separators too

myItem = myContextMenu.getItemAtIndex(0);

Other Functions:

CtxMenuBlock( element )

Block all context menus for this element (nothing will happen on right click)

CtxMenuBlock("#MyClass");

CtxMenuDefault( element )

Set the browsers default context menu on a specified element. Useful if E.g. you create a custom context menu for the entire page but would like all text inputs to still use the default context menu.

CtxMenuDefault(".MyClass");