Simple Dynamic Context Menu In jQuery

The jQuery Simple Context Menu plugin lets you create a fancy, interactive, custom context menu that can help make your user experience stand out from the crowd.

The context menu gets items dynamically from a JS array and displays them in a floating window when right-clicking the target element without interfering with the rest of the page's content. 

See Also:

• 10 Best Context Menus In jQuery And Pure JavaScript

How to use it:

1. Download and load the simple-context-menu.min.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/simple-context-menu.min.js"></script>

2. Call the function on the target element in which the custom context menu should appear and define your menu items in the options array.

<div class="example">
  Right Click Me
</div>

$(".element").simpleContextMenu({
  options: [
    {
      label: "Facebook",
      // use Font Awesome Iconic Font
      icon: '<i class="fa fa-facebook"></i>',
      action: () => console.log("Facebook"),
    },
    {
      label: "Twitter",
      // use PNG
      icon: '<img src="twitter.png">',
      action: () => console.log("Twitter"),
    },
    // ...
  ],
});

3. Apply additional CSS class(es) to the context menu.

$(".element").simpleContextMenu({
  class: 'myClass1 myClass2'
});

4. Callback functions available.

$(".element").simpleContextMenu({
  onShow: function () {
    console.log("Shown");
  },
  onHide: function () {
    console.log("Hidden");
  },
});

About Author:

Author: Md.Harun-Ur-Rashid

Website: https://laravelarticle.com/

---

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