jQuery UI Menu

To create menus, the jQuery UI menu() method is used. It contains the main menu bar with pop-up menus. The items in the pop-up menus can also have sub-pop-up menus. The markup elements are used to create the menus, as long as the parent-child relationship is maintained.

Syntax:

The menu() method can be used in two forms.

$(selector, context).menu (options) Method

$(selector, context).menu (“action”, params) Method

First Method:

To specify that an HTML element and its contents should be treated and managed as menus, the menu (options) method is used. The appearance and behavior of the menu items involved are specified by the “options” parameter which is an object.

Syntax:

$(selector, context).menu (options);

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

$(selector, context).menu({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option	Uses
disabled	To disable the menu, when set to true. The default value is false.
icons	To set the icons for submenus. The default value is { submenu: “ui-icon-carat-1-e” }.
menus	To act as a selector for the elements that serve as the menu container, including sub-menus. The default value is ul.
position	To set the position of submenus with the associated parent menu item. The default value is { my: “left top”, at: “right top” }.
role	To customize the aria roles used for the menu and menu items. The default value is the menu.

Example 1:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 150px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1" ).menu();
});
</script>
</head>
<body>
<h3>Menu::</h3>
<!-- HTML -->
<ul id="menu-1">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blogs</a>
<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
<li><a href="#">Blog 3</a></li>
<li><a href="#">Blog 4</a></li>
<li><a href="#">Blog 5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

Explanation:

In the above example, we are displaying the menu widget functionality. Here, we are passing no parameter to the menu() method. Here, the third item of the menu contains a submenu, while the rest of the other items have no submenu attached to them.

Example 2:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 150px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id="menu-1">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blogs</a>
<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
<li><a href="#">Blog 3</a></li>
<li><a href="#">Blog 4</a></li>
<li><a href="#">Blog 5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

Explanation:

In the above example, we display the use and the behavior of the options icons and positions in the main function of jQuery UI. Here, we are modifying the icon and the position of the submenu.

Second Method:

To act on menu elements, the menu (“action”, params) method is used. It is used to perform actions like enabling/disabling the menu. The first argument here is “action” which is specified as a string. For example, to disable a menu, the “disable” is passed as a value to the action parameter.

Syntax:

$(selector, context).menu ("action", params);

The various actions that can be used with this method are listed below:

Action	Uses
blur( [event ] )	To eliminate the focus from a menu, thus triggering the menu’s blur event by resetting any active element style. The event parameter is of type event and specifies what triggered the menu to blur.
collapse( [event ] )	To close the current active sub-menu. The event parameter is of type event which defines what triggered the menu to collapse.
collapseall( [event ], [all ] )	To close all the open submenus.
destroy()	To eliminate the menu functionality, thus returning the element to its pre-init state. No argument is accepted by this method.
disable()	To disable the menu. No argument is accepted by this method.
enable()	To enable the menu. No argument is accepted by this method.
expand( [event ] )	To open the sub-menu below the currently active item, if one exists. The event parameter is of type event which defines what triggered the menu to expand.
focus( [event ], item )	To activate a particular menu item, begin opening any sub-menu if present and trigger the menu’s focus event. The event parameter is of type event which defines what triggered the menu to gain focus and the item is a jQuery object representing the menu item to focus/activate.
isFirstItem()	To retrieve a boolean value, which states if the currently active menu item is the first menu item. No argument is accepted by this method.
isLastItem()	To retrieve a boolean value, which states if the current active menu item is the last. No argument is accepted by this method.
Next( [event ] )	To delegate the active state to the next menu item. The event parameter is of type event which defines what triggered the focus to move.
Nextpage( [event ] )	To move the active state to the first menu item below the bottom of a scrollable menu or the last item if not scrollable. The event parameter is of type event which defines what triggered the focus to move.
option( optionName )	To retrieve the value currently associated with the specified optionName. The optionName parameter is of type string which defines the name of the option to get.
option()	To retrieve an object containing key/value pairs representing the current menu options hash.
option( optionName, value )	To set the value of the menu option associated with the specified optionName. The optionName parameter is of type string which defines the name of the option to set and the value is of type object which defines the value to set for the option.
option( options )	To set one or more options for the menu. The event parameter is of type object which defines a map of option-value pairs to set.
previous( [event ] )	To move the active state to the previous menu item. The event parameter is of type event which defines what triggered the focus to move.
previouspage( [event ] )	To move the active state to the first menu item above the top of a scrollable menu or the first item if not scrollable. The event parameter is of type event which defines what triggered the focus to move.
refresh()	To initialize the sub-menus and menu items that have not already been initialized. No argument is accepted by this method.
select( [event ] )	Selecting the currently active menu item collapses all sub-menus and triggers the menu’s select event. The event parameter is of type event which defines what triggered the selection.
widget()	To retrieve a jQuery object containing the menu. No argument is accepted by this method.

Example 3:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Menu functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 150px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var menu = ( "#menu-1" ).menu("focus", null, (menu).mouseleave(function () {
menu.menu('collapseAll');
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id="menu-1">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blogs</a>
<ul>
<li><a href="#">Blog 1</a></li>
<li><a href="#">Blog 2</a></li>
<li><a href="#">Blog 3</a></li>
<li><a href="#">Blog 4</a></li>
<li><a href="#">Blog 5</a></li>
</ul>
</li>
</ul>
</body>
</html>

Explanation:

In the above example, we display the use and the behavior of focus and the collapseAll methods. Here, we are automatically focussing on the last item of the menu as soon as the menu is created.

Syntax:

First Method:

Syntax:

Syntax:

Option

Uses

disabled

icons

menus

position

role

Example 1:

Example 2:

Second Method:

Syntax:

Action

Uses

blur(

[event ] )

collapse( [event ] )

collapseall( [event ], [all ] )

destroy()

disable()

enable()

expand( [event ] )

focus( [event ], item )

isFirstItem()

isLastItem()

Next( [event ] )

Nextpage( [event ] )

option( optionName )

option()

option( optionName, value )

options )

previous( [event ] )

previouspage( [event ] )

refresh()

select( [event ] )

widget()

Example 3: