The Super Context Menu plugin enables you to create a dynamic, customizable, multi-level context menu on any content item you select.
Features:
- Dynamic display.
- Unlimited overlap.
- Custom Click Actions.
- Custom menu icons and labels.
How to make use of it:
1. Place jQuery library along with the jQuery superContextMenu plugin’s JavaScript and Stylesheet within the HTML file.
<link href="/path/to/dist/context-menu.min.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/dist/context-menu.min.js"></script>
2. Create your personal menu objects displayed within the context menu as follows:
var myMenu = [{ // Menu Icon. // This example uses Font Awesome Iconic Font. icon: 'fa fa-home', // Menu Label label: 'Homepage', // Callback action: function(option, contextMenuIndex, optionIndex) {}, // An array of submenu objects submenu: null, // is disabled? disabled: false //Disabled status of the option }, { icon: 'fa fa-user', label: 'Profile', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: 'fa fa-envelope', label: 'Contact', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { //Menu separator separator: true }, { icon: 'fa fa-share', label: 'Social Share', action: function(option, contextMenuIndex, optionIndex) {}, submenu: [{ // sub menus icon: 'fa fa-facebook', label: '', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: '', label: 'Twitter', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: 'fa fa-google-plus', label: 'Google Plus', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }], disabled: false }, ];
3. Attach the context menu to a particular container.
$('.element').on('contextmenu', function(e) { e.preventDefault(); superCm.createMenu(myMenu, e); });
4. More API strategies.
// destroy the context menu superCm.destroyMenu() // check if is opened superCm.isOpen() // update the context menu superCm.updateMenu(allowHorzReposition = true, allowVertReposition = true) // update the context menu index superCm.updateMenuIndex(index, repositionX = true, repositionY = true) // get options superCm.getMenuOptions(contextMenuIndex) // add an option superCm.addMenuOption(contextMenuIndex, option, [index]) // add options superCm.addMenuOptions(contextMenuIndex, options, [index]) // delete an option superCm.deleteMenuOption(contextMenuIndex, index) // set an option superCm.setMenuOption(contextMenuIndex, index, option) // set options superCm.setMenuOptions(contextMenuIndex, options)
Dynamic Customizable Context Menu Plugin, Super Context Menu Github
See Demo And Download
Official Website(pwnedgod): Click Here
This superior jQuery/javascript plugin is developed by pwnedgod. For extra advanced usage, please go to the official website.