Simple and Lightweight Vertical 3-Dot Context Menu

The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is a screenshot showing an example of what it looks like.

jQuery is required and most modern browsers should support the library. We have tested the latest versions of Google Chrome, Internet Explorer, Microsoft Edge, and Firefox.

Implement a three-dot context menu

Implementing a 3-dot context menu is as straightforward as adding a single javascript file and a CSS file with a single line of javascript code to implement the menu.

The three-dot list can be added inside <td> tags inside tables, within <p> tags, and HTML heading tags like <h1>, <h2>, etc. (even <h5>).

Must Read – Context Menu Service for Angular | ngx-rightclick

How to make use of it:

1. Import the jQuery JavaScript library and the jQuery 3Dot Context Menu plugin.

<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</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 component during which you need 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 on the 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 performance when opening the menu.

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

Disable menu items

You can disable the menu item so that it is not dynamically clickable. This can be done in two ways. You can either disable a menu item from within the openCallBack method or by calling the disable method via the ContextMenu object, in the above example it would be varContextMenu.

Hide menu items

You can dynamically hide the menu item from appearing. This can be done in two ways. You can either disable a menu item from within the openCallBack method, or by calling the hideMenuItem method via the ContextMenu object, in the above example it would be varContextMenu.

Read More – 

Customizable Context Menu Based on jQuery | supercontextmenu
A Modern and Lightweight Context Menu JavaScript Library | ModernContext.js

Vertical-3-Dot-Context-Menu-Demo


See Demo And Download

Official Website(BoardiesITSolutions): Click Here

This superior jQuery/javascript plugin is developed by BoardiesITSolutions. For extra advanced usage, please go to the official website.

Share