Inline Context Menu Plugin - npContextMenu

File Size: 8.21 KB
Views Total: 1592
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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>

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

  menuSelector: "#contextMenuDemo"

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

<ul id="contextDynamicMenu" role="menu" style="display:none" ></ul>
  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.

  setEvents: 'contextmenu'

6. Available event handlers.

  onMenuOptionSelected: function ($invokedOn, $selectedMenu) {
    saySelected($invokedOn, $selectedMenu);
  onMenuShow: function($invokedOn) {
  onMenuHide: function($invokedOn) {

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