Dynamic Customizable Context Menu Plugin - jQuery superContextMenu

File Size: | 12.4 KB |
---|---|
Views Total: | |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Super Context Menu plugin enables you to create a dynamic, customizable, multi-level context menu on any container element you specify.
Features:
- Dynamic rendering.
- Unlimited nesting.
- Custom click actions.
- Custom menu icons and labels.
How to use it:
1. Place jQuery library together with the jQuery superContextMenu plugin's JavaScript and Stylesheet in the html file.
<link href="dist/context-menu.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="dist/context-menu.min.js"></script>
2. Create your own menu items displayed in the context menu as follows:
var myMenu = [{ // Menu Icon. // This example uses Font Awesome Iconic Font. icon: 'fa fa-home', // Menu Label label: 'Homepage', // Callback action: function(option, contextMenuIndex, optionIndex) {}, // An array of submenu objects submenu: null, // is disabled? disabled: false //Disabled status of the option }, { icon: 'fa fa-user', label: 'Profile', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: 'fa fa-envelope', label: 'Contact', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { //Menu separator separator: true }, { icon: 'fa fa-share', label: 'Social Share', action: function(option, contextMenuIndex, optionIndex) {}, submenu: [{ // sub menus icon: 'fa fa-facebook', label: 'Facebook', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: 'fa fa-twitter', label: 'Twitter', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }, { icon: 'fa fa-google-plus', label: 'Google Plus', action: function(option, contextMenuIndex, optionIndex) {}, submenu: null, disabled: false }], disabled: false }, ];
3. Attach the context menu to a specific container.
$('.element').on('contextmenu', function(e) { e.preventDefault(); superCm.createMenu(myMenu, e); });
This awesome jQuery plugin is developed by pwnedgod. For more Advanced Usages, please check the demo page or visit the official website.
- Prev: Side Overlay Navigation With jQuery And CSS3
- Next: None