Customizable Multi-level Context Menu Plugin - jquery-menu.js

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.