Material Design Style Context Menu With jQuery - 3Dot Context Menu

This is a simple jQuery plugin which adds a Material Design inspired custom context menu with a vertical three dots toggle icon to any elements such as tables, paragraphs, and headings.

Basic usage:

1. Import jQuery JavaScript library and the jQuery 3Dot Context Menu plugin's files into the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="context-menu.js"></script>
<link href="context-menu.css" rel="stylesheet">

2. Create the context menu.

<div class="context-menu-container" id="context-menu-items">
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    ...
  </ul>
</div>

3. Add the context-menu class and data-container-id attribute to any element in which you want to place the vertical three dots toggle icon.

<!-- Table -->
<td class="context-menu" data-container-id="context-menu-items" data-row-id="1"></td>
<td class="context-menu" data-container-id="context-menu-items" data-row-id="2"></td>

<!-- Paragraph -->
<p>Here is a context menu in a &lt;p&gt; <span class="context-menu" data-container-id="context-menu-items"></span></p>

<!-- Heading -->
<h3 class="context-menu" data-container-id="context-menu-items">Here is an h3 with a context menu</h3>

4. Bind click listener to the context menu.

$(document).ready(function(){
  var tableContextMenu = new ContextMenu("context-menu-items", menuItemClickListener);
});

function menuItemClickListener(menu_item, parent)
{
  alert("Menu Item Clicked: " + menu_item.text() + "\nRecord ID: " + parent.attr("data-row-id"));
}

5. Trigger a function when opening the menu.

var tableContextMenu = new ContextMenu("context-menu-items", menuItemClickListener, {
    openCallBack: function(contextMenu) {
      console.log("Opening context menu call back called");
    }
});

Changelog:

2021-02-11

• Fix multiple click binds

2020-10-25

• Optioanl callback now returns the parent id

2018-10-28

• Fixed issue with menu item onclick being passed through to parent object

2018-03-28

• Hide/Show Menu Items

2017-12-28

• Fixed issue with last update where the parent returned in the item click listener wouldn't find the attribute values.

2017-12-27

• Added a warning and danger CSS class to be used for the menu items so that a different colour background can be shown to warn the user of a danger of performing an action
• Added ability to receive a call back in the event that the context menu is being opened up, this allows manipulation of the menu item before it is shown to the user, for example, disabling and enabling a menu item.
• Added ability to enable/disable menu item from being clicked.

2017-12-05

• Fixed issue with context menu not opening in correct place if user was scrolled down page.
• Fixed issue with context menu not working on Firefox

---

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