Home » jQuery » jQuery Menu

jQuery Menu

This jQuery plugin makes it easy to add right-click context menu functionality to any web application. A context menu can help make a web application feel even more like a native application.

  • Supports keyboard control.
  • Always stays in viewport (menus never open outside of the visible area).
  • Supports infinite amount of sub-menus.
  • Enable disable items or entire menus.
  • Add and remove items and let the menu refresh.
  • Add separators between groups of similar items.
  • Show non-menu items like images or forms.
  • Supports right- or left-click control.
  • Multiple elements can share menus.
  • Menus automatically resize based on menu contents.
  • Build menus with HTML or pass in a JavaScript object.
  • Customizable callbacks for each menu (on_load, on_show, on_hide, and on_select).
Language Javascript
License MIT
Version 2.0.0
Release date January 3, 2017
Download zip archive
Source git clone https://github.com/sizeofcat/jquery-menu.git

Setup

First you need to include the jQuery library, since Menu is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Secondly, you need to include the jQuery Menu javascript and the css file into your page. You can do it by adding the code below to your page.

<script src="js/jquery-menu.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-menu.css" />

Next, you implement the structure for the menu. This can be done two ways: either pure HTML using lists and divs OR you can pass a JavaScript object to the catMenu() function. I’ll present the first method here.

<div id="simpleCallbackMenu">
    <ul>
        <li id="MenuItem1"><a href="#Item1">Menu Item 1</a></li>
        <li 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>
        <li id="MenuItem4" class="separator"><a href="#Item4">Menu Item 4</a></li>
    </ul>
</div>

As the last step, you trigger the catMenu() function on the element you just created. In this case, we trigger the menu on the element with the id simpleCallback and we build the menu from the element with the id simpleCallbackMenu.

$('#simpleCallback').catMenu({
    menu: 'simpleCallbackMenu'
});

Settings

Name Default Description
menu Id of the element containing the menu DOM structure or an array with the menu items.
mouse_button ‘right’ Sets which button causes the menu to appear, can be left or right.
min_width 120 Minimal width of the menu in pixels.
max_width 0 Maximum width of the menu, 0 means no maximum.
delay 500 Delay in miliseconds before the sub-menu vanishes.
keyboard true Enables or disables the keyboard control.
hover_intent true Should use the hoverIntent jQuery plugin.

Callbacks

Name Description
on_select() Function to be called when a user clicks on a menu item.
on_load() Function to be called when the menu is done building.
on_show() Function to be called when the menu is shown.
on_hide() Function to be called when the menu is hidden.

Demo

Right Click Me
Left Click Me