Plain Nested Context Menu Plugin - jQuery ggContextMenu

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

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.