Plain Nested Context Menu Plugin - jQuery ggContextMenu
| File Size: | 22.4 KB |
|---|---|
| Views Total: | 1085 |
| 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.











