Simple Dynamic Context Menu In jQuery
File Size: | 39.6 KB |
---|---|
Views Total: | 1151 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.