Dynamic Customizable Context Menu Plugin - jQuery superContextMenu

The Super Context Menu plugin enables you to create a dynamic, customizable, multi-level context menu on any container element you specify.

Features:

• Dynamic rendering.
• Unlimited nesting.
• Custom click actions.
• Custom menu icons and labels.

How to use it:

1. Place jQuery library together with the jQuery superContextMenu plugin's JavaScript and Stylesheet in the html file.

<link href="dist/context-menu.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/context-menu.min.js"></script>

2. Create your own menu items displayed in 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: 'Facebook',  
      action: function(option, contextMenuIndex, optionIndex) {}, 
      submenu: null,  
      disabled: false  
    },
    {
      icon: 'fa fa-twitter',  
      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 specific container.

$('.element').on('contextmenu', function(e) {
  e.preventDefault();
  superCm.createMenu(myMenu, e);
});

Changelog:

2018-05-26

• Fix MS Internet explorer 11 related issues

2018-05-22

• Add namespace to prevent accidental unbinding

---

This awesome jQuery plugin is developed by pwnedgod. For more Advanced Usages, please check the demo page or visit the official website.