jQuery UI Menu

The jQuery UI Menu widget consists of a main menu bar with pop up menus. Some items in the pop up menus also have sub pop up menus. These menus are created by using markup elements as long as the parent child relationship is maintained.

The jQuery UI uses the menu() method to create menus.

Syntax:

You can use the menu() method in two forms.

First Method

The menu (options) method specifies that an HTML element and its contents should be treated and managed as menus. Here the options parameter is an object that specifies the appearance and behavior of the menu items involved.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one options, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option	Description
disabled	If you set this option to true, it disables the menu. By default its value is false.
icons	This option sets the icons for submenus. By default its value is { submenu: "ui-icon-carat-1-e" }.
menus	This option is a selector for the elements that serve as the menu container, including sub-menus. By default its value is ul.
position	This option sets the position of submenus in relation to the associated parent menu item. By default its value is { my: "left top", at: "right top" }.
role	This option is used to customize the aria roles used for the menu and menu items. By default its value is menu.

jQueryUI Menu example 1

Let's take a simple example to demonstrate the menu widget functionality, passing no parameter to the menu() method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-1" ).menu();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-1">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

Test it Now

jQuery UI Menu() example 2

Use of icons and position:

Let's take an example to demonstrate the usage of two options icons and position in the main function of jQuery UI.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#menu-2" ).menu({
               icons: { submenu: "ui-icon-circle-triangle-e"},
               position: { my: "right top", at: "right-10 top+5" }
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-2">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java IO</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
                <li><a href="#">Hibernate</a></li>
                 <li><a href="#">Struts</a></li>
            </ul>
         </li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
      </ul>
   </body>
</html>

Test it Now

Second Method

The menu ("action", params) method is used to perform an action on menu elements, such as enabling/disabling the menu. The action is specified as a string in the first argument (e.g., "disable" disables the menu). Check out the actions that can be passed, in the following table.

Syntax:

Following is a list of different actions that can be used with this method.

Action	Description
blur( [event ] )	This action removes the focus from a menu. It triggers the menu's blur event by resetting any active element style. Here event is of type event and represents what triggered the menu to blur.
collapse( [event ] )	This action closes the current active sub-menu. Here event is of type event and represents what triggered the menu to collapse.
collapseall( [event ] [, all ] )	This action closes all the open submenus.
destroy()	This action removes menu functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.
disable()	This action disables the menu. This method does not accept any arguments.
enable()	This action is used to enable the menu. This method does not accept any arguments.
expand( [event ] )	This action is used to open the sub-menu below the currently active item, if one exists. Here event is of type event and represents what triggered the menu to expand.
focus( [event ], item )	This action activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event. Here event is of type event and represents what triggered the menu to gain focus and item is a jQuery object representing the menu item to focus/activate.
isFirstItem()	This action returns a boolean value, which states if the current active menu item is the first menu item. This method does not accept any arguments.
isLastItem()	This action returns a boolean value, which states if the current active menu item is the last menu item. This method does not accept any arguments.
Next( [event ] )	This action delegates the active state to the next menu item. Here event is of type event and represents what triggered the focus to move.
Nextpage( [event ] )	This action moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. Here event is of type event and represents what triggered the focus to move.
option( optionName )	This action gets the value currently associated with the specified optionName. Here optionName is of type string and represents the name of the option to get.
option()	This action gets an object containing key/value pairs representing the current menu options hash.
option( optionName, value )	This action sets the value of the menu option associated with the specified optionName. Here optionName is of type string and represents name of option to set and value is of type object and represents value to set for the option.
option( options )	This action sets one or more options for the menu. Here options is of type object and represents a map of option-value pairs to set.
previous( [event ] )	This action moves active state to previous menu item. Here event is of type event and represents what triggered the focus to move.
previouspage( [event ] )	This action moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable. Here event is of type event and represents what triggered the focus to move.
refresh()	This action initializes sub-menus and menu items that have not already been initialized. This method does not accept any arguments.
select( [event ] )	This action selects the currently active menu item, collapses all sub-menus and triggers the menu's select event. Here event is of type event and represents what triggered the selection.
widget()	This action returns a jQuery object containing the menu. This method does not accept any arguments.

jQueryUI Menu() example 3

Use focus and collapseAll method:

Let's take an example to demonstrate the use of focus and collapse all method.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Menu functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- CSS -->
      <style>
         .ui-menu {
            width: 200px;
         }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            var menu = $("#menu-4").menu();
            $( "#menu-4" ).menu("focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
            $(menu).mouseleave(function () {
               menu.menu('collapseAll');
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <ul id="menu-4">
         <li><a href="#">C</a></li>
         <li><a href="#">C++</a></li>
         <li><a href="#">JSF</a></li>
         <li><a href="#">HTML5</a></li>
         <li><a href="#">Java</a>
            <ul>
               <li><a href="#">Core Java</a></li>
               <li><a href="#">J2EE</a></li>
               <li><a href="#">Spring</a></li>
               <li><a href="#">Hibernate</a></li>
               <li><a href="#">Struts</a></li>
       </ul>
         </li>
      </ul>
   </body>
</html>

Test it Now

Next TopicjQuery UI Progressbar

← prev next →