CtxMenu (Javascript) is a modern, lightweight, object-oriented solution for adding right-click context menus to your website.
Must Read: Skinnable Right-Click Context Menu Library for Web | context-js
How to make use of it:
1. Add the script to the HTML code of the pages you wish to use:
<script src="./ctxmenu.min/ctxmenu.min.js"></script>
2. Basic setup for the list:
// 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!")
});3. 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.
Read More: jQuery Enable Right-click Context Menu for Bootstrap
| 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 |
See Also –
Simple and Lightweight Vertical 3-Dot Context Menu
Context Menu Service for Angular | ngx-rightclick
Simple To Use Context Menu Plugin for Angular | ng-simple-contextmenu
See Demo And Download
Official Website(nils-soderman): Click Here
This superior jQuery/javascript plugin is developed by nils-soderman. For extra Advanced usage, please go to the official website.
