Inline Context Menu Plugin - npContextMenu

npContextMenu is a simple, lightweight, SEO-friendly context menu plugin which loads menu items from an inline unordered list when triggered.

How to use it:

1. To use the context menu plugin, include the jquery.npContextMenu.js script after jQuery and we're ready to go.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/jquery.npContextMenu.js"></script>

2. Create a HIDDEN html list for the content menu.

<ul id="contextMenuDemo" role="menu" style="display:none" >
  <li><a tabindex="-1" href="#" npaction="go_youtube">Youtube</a></li>
  <li><a tabindex="-1" href="#" npaction="go_google">Google</a></li>
  <li><a tabindex="-1" href="#" npaction="go_bing">Bing</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#" npaction="go_imdb">IMDB</a></li>
</ul>

3. Append the content menu to an element you specify. Done.

$("#element").npContextMenu({
  menuSelector: "#contextMenuDemo"
});

4. You can also define the menu list in the JavaScript during init.

<ul id="contextDynamicMenu" role="menu" style="display:none" ></ul>

$("#element").npContextMenu({
  menuSelector: "#contextDynamicMenu",
  dynamicContent: function($invokedOn) {
    return '<li><a tabindex="-1" href="#" npaction="search_google">Search on Google for '+$invokedOn.text()+'</a></li><li><a tabindex="-1" href="#" npaction="search_bing">Search on Bing for '+$invokedOn.text()+'</a></li>';
  }
});

5. Set the trigger event. By default, the context menu can be triggered by both left click and right click.

$("#element").npContextMenu({
  setEvents: 'contextmenu'
});

6. Available event handlers.

$("#element").npContextMenu({
  onMenuOptionSelected: function ($invokedOn, $selectedMenu) {
    saySelected($invokedOn, $selectedMenu);
  },
  onMenuShow: function($invokedOn) {
    $invokedOn.addClass("success");
  },
  onMenuHide: function($invokedOn) {
    $invokedOn.removeClass("success");
  }
});

---

This awesome jQuery plugin is developed by alpenzoo. For more Advanced Usages, please check the demo page or visit the official website.