Menu

<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3-1</li>
      <li>Item 3-2</li>
      <li>Item 3-3</li>
      <li>Item 3-4</li>
      <li>Item 3-5</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<ul id="menu">
  <li><span class="ui-icon ui-icon-disk"></span>Save</li>
</ul>

<ul id="menu">
  <li>Item 1</li>
  <li>-</li>
  <li>Item 2</li>
</ul>

Theming

The menu widget uses the jQuery UI CSS framework to style its look and feel. If menu specific styling is needed, the following CSS class names can be used:

$( ".selector" ).menu({
  disabled: true
});

// Getter
var disabled = $( ".selector" ).menu( "option", "disabled" );
 
// Setter
$( ".selector" ).menu( "option", "disabled", true );

• submenu (string, default: "ui-icon-carat-1-e")

$( ".selector" ).menu({
  icons: { submenu: "ui-icon-circle-triangle-e" }
});

// Getter
var icons = $( ".selector" ).menu( "option", "icons" );
 
// Setter
$( ".selector" ).menu( "option", "icons", { submenu: "ui-icon-circle-triangle-e" } );

Selector for the elements that serve as the menu items.

$( ".selector" ).menu({
  items: ".custom-item"
});

// Getter
var items = $( ".selector" ).menu( "option", "items" );

Selector for the elements that serve as the menu container, including sub-menus.

$( ".selector" ).menu({
  menus: "div"
});

// Getter
var menus = $( ".selector" ).menu( "option", "menus" );

$( ".selector" ).menu({
  position: { my: "left top", at: "right-5 top+5" }
});

// Getter
var position = $( ".selector" ).menu( "option", "position" );
 
// Setter
$( ".selector" ).menu( "option", "position", { my: "left top", at: "right-5 top+5" } );

Customize the ARIA roles used for the menu and menu items. The default uses "menuitem" for items. Setting the role option to "listbox" will use "option" for items. If set to null, no roles will be set, which is useful if the menu is being controlled by another element that is maintaining focus.

$( ".selector" ).menu({
  role: null
});

// Getter
var role = $( ".selector" ).menu( "option", "role" );

Invoke the blur method:

$( ".selector" ).menu( "blur" );

Invoke the collapse method:

$( ".selector" ).menu( "collapse" );

Invoke the collapseAll method:

$( ".selector" ).menu( "collapseAll", null, true );

Invoke the destroy method:

$( ".selector" ).menu( "destroy" );

Invoke the disable method:

$( ".selector" ).menu( "disable" );

Invoke the enable method:

$( ".selector" ).menu( "enable" );

Invoke the expand method:

$( ".selector" ).menu( "expand" );

Invoke the focus method:

$( ".selector" ).menu( "focus", null, menu.find( ".ui-menu-item:last" ) );

Retrieves the menu's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the menu plugin has loaded.

Invoke the instance method:

$( ".selector" ).menu( "instance" );

Invoke the isFirstItem method:

var firstItem = $( ".selector" ).menu( "isFirstItem" );

Invoke the isLastItem method:

var lastItem = $( ".selector" ).menu( "isLastItem" );

Invoke the next method:

$( ".selector" ).menu( "next" );

Invoke the nextPage method:

$( ".selector" ).menu( "nextPage" );

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

Invoke the method:

var isDisabled = $( ".selector" ).menu( "option", "disabled" );

Invoke the method:

var options = $( ".selector" ).menu( "option" );

Sets the value of the menu option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

Invoke the method:

$( ".selector" ).menu( "option", "disabled", true );

Invoke the method:

$( ".selector" ).menu( "option", { disabled: true } );

Invoke the previous method:

$( ".selector" ).menu( "previous" );

Invoke the previousPage method:

$( ".selector" ).menu( "previousPage" );

Invoke the refresh method:

$( ".selector" ).menu( "refresh" );

Invoke the select method:

$( ".selector" ).menu( "select" );

Invoke the widget method:

var widget = $( ".selector" ).menu( "widget" );

Never close menus on document click.

_closeOnDocumentClick: function( event ) {
  return false;
}

Treat all items as menu items with no dividers.

_isDivider: function( item ) {
  return false;
}

Initialize the menu with the blur callback specified:

$( ".selector" ).menu({
  blur: function( event, ui ) {}
});

Bind an event listener to the menublur event:

$( ".selector" ).on( "menublur", function( event, ui ) {} );

Initialize the menu with the create callback specified:

$( ".selector" ).menu({
  create: function( event, ui ) {}
});

Bind an event listener to the menucreate event:

$( ".selector" ).on( "menucreate", function( event, ui ) {} );

Initialize the menu with the focus callback specified:

$( ".selector" ).menu({
  focus: function( event, ui ) {}
});

Bind an event listener to the menufocus event:

$( ".selector" ).on( "menufocus", function( event, ui ) {} );

Initialize the menu with the select callback specified:

$( ".selector" ).menu({
  select: function( event, ui ) {}
});

Bind an event listener to the menuselect event:

$( ".selector" ).on( "menuselect", function( event, ui ) {} );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>menu demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  .ui-menu {
    width: 200px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3-1</li>
      <li>Item 3-2</li>
      <li>Item 3-3</li>
      <li>Item 3-4</li>
      <li>Item 3-5</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>
$( "#menu" ).menu();
</script>
 
</body>
</html>