Plain Nested Context Menu Plugin - jQuery ggContextMenu
File Size: | 22.4 KB |
---|---|
Views Total: | 1045 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ggContextMenu is a lightweight jQuery plugin to create multi-level, nested list based context menus triggered with right click.
How to use it:
1. Insert jQuery JavaScript library together with the jQuery ggContextMenu plugin's JavaScript and Stylesheet into the document.
<link href="css/contextMenu.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="js/contextMenu.js"></script>
2. Create a multi-level context menu following the HTML structure like this:
<div id="example" class="ggContextMenu"> <div> <ul> <li> <span>Option 1</span> </li> <li> <span>Option 2</span> </li> <li> <span>Option 3</span> </li> <li class="sub-level"> <span>Option 4</span> <div class="sub-level"> <ul> <li><span>Option 4.1</span></li> <li><span>Option 4.2</span></li> <li><span>Option 4.3</span></li> <li class="sub-level"> <span>Option 4.4</span> <div class="sub-level"> <ul> <li><span>Option 4.4.1</span></li> <li><span>Option 4.4.2</span></li> <li><span>Option 4.4.3</span></li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </div>
3. Append the context menu to a specified DOM element using the 'context-menu' attribute:
<div context-menu="example"> Content Here </div>
This awesome jQuery plugin is developed by GGaritaJ. For more Advanced Usages, please check the demo page or visit the official website.