Press "Enter" to skip to content

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.

three dots dropdown menu, 3 dots dropdown menu, how to make 3 horizontal dots using css, three vertical dots html code, 3 horizontal dots html

How to make use of it:

1. Import the jQuery JavaScript library and the jQuery 3Dot Context Menu plugin’s information into the online web page.

<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 perform when opening the menu.

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

Material Design Style Context Menu, three dots menu, 3 dots pop up menu, 3-dot Context Menu Plugin/Github

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.