Search within TutorialsPark

jQuery UI : Menu Widget

Learn how to use jQuery UI Menu Widget to create Select Menus.

jQuery UI : Menu Widget

The jQuery UI Menu Widget is to transform a list of hyperlinks into a themeable menu which can be controlled using Keyboard or Mouse,

The Items within the menu Bar are selectable and allows the user to navigate to any part of the website(or external Links), you can even create submenus with additional decorations like icons and images.

When not required the items can also be disabled/enabled programmatically, to prevent the user from accessing it.

jQuery UI Menu Widget : Creating a Menu Widget

Navigation is one of the most critical element of WebDevelopment. The jQuery UI Menu widget can be created using method menu on an unordered list to transfrom it into a simple menu.

In the demo below, we have a unordered list using ul tags, additional style is added to set the width of the Select Menu, or else it will occupy 100 percent of the width of the container.

Example: jQuery UI Menu Widget - Create Menu Widget

Give it a TRY! » Note: We call the menu() widget on the jQuery Object, representing the menu container.

jQuery UI Menu : Menu CSS Framework Classes

Table : jQuery UI Menu CSS FrameWork Classes

Classname Description
ui-menu It is applied to the outer container of the menu
ui-widget It is applied to the outer container of all widgets.It assigns font-family and font-size to widgets
ui-widget-content It is applicable to content container styles to an element and its child text, links and icons
ui-corner-all It is apply corner radius to all four corners of the element.
ui-menu-icons To apply submenu icon sets using icon options
ui-state-disabled To apply dimmed opacity to the elements disabled.
ui-menu-item It is the container for all individual items
ui-menu-divider To apply a divider in between the menu items.
ui-state-focus To apply a clickable focus container style to an element and its child elements, links and icons.
ui-state-active To apply a clickable active container style to an element and its child, text, links and icons.
ui-icon To apply a base class to an icon element. The background image is same as container.
ui-icon-xxx-xxx To apply a second class to describe the type of the icon.

jQuery UI Menu : Configuring the Menu

jQuery UI Menu Widget can be configured using a rich set of options that control the features of the widget.

Table : jQuery UI Menu CSS FrameWork Classes

Option Description
disabled If set to true, the menu is Disabled. Default value is false
icons To set the icons to be used for menus, provided by jQuery UI CSS framework
menus To set the selector for elements to be used as menu containers. Default value is element ul
position To identify the position of the submenus related to the associated parent menu item. Default Value
{my: "left top+15" , at: "left bottom" , collision: "flipfit"}
role To set the Accessible Rich Internet Application(ARIA) roles used for the menu and its items.

jQuery UI Menu : Denoting the State of Menus using Icons

jQuery UI Menu Widget's appearance can be enhanced using icons and classes for enabled or disabled states.

The default icon for submenus have been replaced using a custom icon using a javaScript Code.

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

Give it a TRY! » Note: In the script, the option icon is used to assign an icon for the submenu.

jQuery UI Menu : Adding Divider to 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 - Adding Divider to Menus

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