Customizable Multi-level Context Menu Plugin - jquery-menu.js
File Size: | 10.4 KB |
---|---|
Views Total: | 1537 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The jquery-menu.js jQuery plugin makes it easier to create a customizable, multi-level context menu from nested html unordered lists.
More features:
- Keyboard interactions.
- Supports both right- and left-click events.
- Works with hoverIntent jQuery plugin.
How to use it:
1. Load jQuery library together with the context menu plugin's JavaScript and Stylesheet in the html document.
<link href="css/jquery-menu.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/jquery-menu.js"></script>
2. Load the hoverIntent jQuery plugin tp determine the user's intent as you browse the context menu.
<script src="js/jquery.hoverintent.js"></script>
3. Add your own menu items to the context menu following the markup structure like this:
<div id="myMenu"> <ul> <li id="MenuItem1"><a href="#Item1">Menu Item 1</a></li> <li class="disabled" id="MenuItem2"><a href="#Item2">Menu Item 2</a></li> <li id="MenuItem3"><a href="#Item3">Menu Item 3</a> <ul> <li id="MenuItem3.1"><a href="#Item3.1">Menu Item 3.1</a></li> <li id="MenuItem3.2"><a href="#Item3.2">Menu Item 3.2</a></li> <li id="MenuItem3.3"><a href="#Item3.3">Menu Item 3.3</a> <ul> <li id="MenuItem3.3.1"><a href="#Item3.3.1">Menu Item 3.3.1</a></li> <li id="MenuItem3.3.2"><a href="#Item3.3.2">Menu Item 3.3.2</a></li> <li id="MenuItem3.3.3"><a href="#Item3.3.3">Menu Item 3.3.3</a></li> <li id="MenuItem3.3.4"><a href="#Item3.3.4">Menu Item 3.3.4</a></li> </ul> </li> <li id="MenuItem3.4"><a href="#Item3.4">Menu Item 3.4</a></li> </ul> </li> </ul> </div>
4. Call the function on the target element where you want to display the context menu when right click.
$('.element').catMenu({ menu: 'myMenu' });
5. Possible plugin options to customize the context menu.
$('.element').catMenu({ // or 'left': left click mouse_button: 'right', // min/max width min_width: 120, max_width: 0, // in milliseconds delay: 500, // enable keyboard interactions keyboard: true, // enable hoverIntent jQuery plugin hover_intent: true });
6. Available callback functions you might find useful.
$('.element').catMenu({ on_select: function(item) { }, on_load: function() { }, on_show: function() { }, on_hide: function() { } });
This awesome jQuery plugin is developed by sizeofcat. For more Advanced Usages, please check the demo page or visit the official website.