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 <p> <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
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