Customizable right click context menus for your website.
- Download the latest version
- Upload the CtxMenu folder to your server
- 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.
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!") });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);addItem(
text, function, ?icon, ?index )
Appends a new item to the menu.
| Arguments | Description |
|---|---|
| text | The text that will be displayed in the menu |
| function | The function to be called when the item is clicked |
| icon | Url to an icon to be displayed before the text |
| index | The list index where to insert the item |
myContextMenu.addItem("Text Here", myFunction, icon = "myIcon.png", index = 0);addSeperator( ?index )
Adds a horizontal line to the menu
| Arguments | Description |
|---|---|
| index | The list index where to insert the item |
myContextMenu.addSeperator(index = 1);