Custom Dynamic Right-click Menu In jQuery - JqContextMenu

Yet another jQuery context menu plugin which attaches a custom, dynamic right-click menu to any DOM element.

Features:

• Light & dark themes.
• Custom icons.
• Handles actions for each menu item.
• Lightweight and simple to use.

How to use it:

1. Link to jQuery library and the JqContextMenu plugin's files.

<link rel="stylesheet" href="/path/to/jqcontext-menu.css">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jqcontext-menu.js"></script>

2. Load a Iconic Font (e.g. Font Awesome) for the menu items (OPTIONAL).

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

3. Define your menu data in an array of JS objects:

• icon: icon class(es)
• text: menu name
• dataKey: data key to handle clicks

const myMenu = [{
        icon: 'fas fa-angle-right',
        text: 'Add',
        dataKey: 'add'
      },
      {
        icon: 'fas fa-angle-right',
        text: 'Copy',
        dataKey: 'copy'
      },
      {
        icon: 'fas fa-angle-right',
        text: 'Add to Bookmarks',
        dataKey: 'bookmark'
      },
      {
        icon: 'fas fa-angle-right',
        text: 'Stats',
        dataKey: 'stats',
      },
      {
        icon: 'fas fa-angle-right',
        text: 'Delete',
        dataKey: 'bookmark'
      }
]

4. Initialize the plugin to attach the context menu to a specific element.

<div id="content"></div>

$('#content').jqContextMenu({
  contextMenu: myMenu
});

5. Use the dark theme.

$('#content').jqContextMenu({
  contextMenu: myMenu,
  defaultStyle: 'jqcontext-menu-dark'
});

6. The example item click handler.

$(document).on('mousedown', '#content #jqcontext-menu li', function () {
  var dataKey = $(this).attr('data-key');

  if (dataKey == 'edit'){
    alert('you clicked "edit" button');
  } else {
    alert('you clicked ' + dataKey+ ' button');
  }
});

---

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