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

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.

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"));
}

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

  • Publication date: 04.12.2017
  • Source