Search within TutorialsPark

jQuery UI : Menu Methods


Learn how to use jQuery UI Menu Methods to Control and Manipulate Menus


jQuery UI : Menu Methods

The jQuery UI Menu widget provides a rich set of methods in addition to core methods like destroy, disable, enable, option and widget

There are also a set of advanced functionality that enables you to work with it programmatically.


Table : jQuery UI Menu Methods

Option Description
blur To Remove focus from a menu, reset any active element styles and trigger the menu's blue event.
collapse To close the currenlty active submenu
collapseAll To close all submenus
expand It open the submenu below the current active item.
focus To Activate a particular menu item , start opening submenus if present and trigger the menu's focus event.
isFirstItem To Return the boolean Value denoting whether or not the currently active item is the first item in the menu.
isLastItem To Return the boolean Value denoting whether or not the currently active item is the last item in the menu.
next To move active state to the next menu item.
nextPage To move active state to the first menu item below the bottom of a scrollable menu
option To set or get a property after the widget has been initialized.
previous TO move the active state to the previous menu item.
previousPage To move the active state of the first menu item above the top of a scrollable menu.
refresh To initialize menu and submenu items not yet initialized, when new content have been added.
select To select the current active menu items, collapse all submenus, and trigger the menu's select event.

jQuery UI Menu Widget : Enable and Disable Menu Programmatically

jQuery UI Menu widget can be enabled and disabled as and when required programmatically.However, you cannot disable individual item but the entire menu.

This problem can be overcome by using class ui-state-disabled and methods of addClass() and removeClass() to add or remove classes.

Example: jQuery UI Menu Widget - Enable and Disable Menu Programmatically

Give it a TRY! » Note:We are using pseudo Selectors to locate individual menu elements and then apply classes on them.


jQuery UI Menu : Add and Remove Menu items Programmatically.

jQuery UI Menu Widget methods can be used to add or remove menu items using input element and JavaScript codes to append items in the DOM.

In the demo, we use input element to add new menu items, and then functions are used to add menu items by first creating the required markup and then appending it to the menu.

Example: jQuery UI Menu - Denoting the State of Menu using Icons

Give it a TRY! » Note: The Method refresh() is used to display the change made in the browser.


jQuery UI Menu Methods : Horizontal Menus

The jQuery UI Menu can be added with Dividers at specific points to group related items together, or to seperate fixed menu items from dynamic ones.

A divider can be added by using class ui-menu-divider or using -- between li elements.

Example: jQuery UI Menu - Horizontal Menus

Give it a TRY! » Note: Both Option can work , but using the CSS option is more descriptive.