Press "Enter" to skip to content

Customizable Context Menu Based on jQuery | supercontextmenu

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.