Inline Context Menu Plugin - npContextMenu

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.

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.

  • Publication date: 23.03.2019
  • Source