jQuery UI API - Menu Widget

Categories

Widgets

Usage

Description:A themeable menu for navigation with mouse and keyboard interaction.

Version added:1.9

Menus can be created from any valid markup as long as the elements have a strict parent/child relationship and each menu item has an anchor. The most common element is an unordered list (<ul>）：

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>

If using a non-<ul>/<li>structure, to use the same element for the menu and menu items, use themenusoption to distinguish between the two elements, for examplemenus: "div.menuElement"。

You can, by addingui-state-disabledclass to an element, disable any menu item.

Icons

To add icons to the menu, include the icon in the markup:

<ul id="menu">
  <li><a href="../index.html"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>

The menu automatically adds the necessary padding to items without icons.

Separators

Separator elements can be created by including an unlinked menu item that contains only spaces/dashes:

<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li>-</li>
  <li><a href="../index.html">Item 2</a></li>
</ul>

Keyboard Interaction

  • ENTER/SPACE: Invoke the action of the focused menu item, possibly opening a submenu.
  • UP: Move focus to the previous menu item.
  • DOWN: Move focus to the next menu item.
  • RIGHT: Open the submenu, if available.
  • LEFT: Close the current submenu and move focus to the parent menu item. If the focus is not on a submenu, do nothing.
  • ESCAPE: Close the current submenu and move focus to the parent menu item. If the focus is not on a submenu, do nothing.

Type a letter to move focus to the first item starting with that letter. Repeating the same character cycles through matching items. Typing more characters within a short period matches the characters entered.

Disabled items can receive keyboard focus, but do not allow any interaction.

Theming

The Menu Widget uses thejQuery UI CSS Frameworkto define the styling of its look and feel. If you need to use menu-specific styles, the following CSS class names can be used:

  • ui-menu: The outer container of the menu. If the menu contains icons, this element will also have aui-menu-icons class。
    • ui-menu-item: The container for a single menu item.
      • ui-menu-icon: Via theiconsoption for setting the submenu icon.
    • ui-menu-divider: A separator element between menu items.

Dependencies

Additional Notes

  • This widget requires some functional CSS in order to work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Examples

A simple jQuery UI menu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>菜单部件（Menu Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.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.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="menu">
  <li><a href="../index.html">Item 1</a></li>
  <li><a href="../index.html">Item 2</a></li>
  <li><a href="../index.html">Item 3</a>
    <ul>
      <li><a href="../index.html">Item 3-1</a></li>
      <li><a href="../index.html">Item 3-2</a></li>
      <li><a href="../index.html">Item 3-3</a></li>
      <li><a href="../index.html">Item 3-4</a></li>
      <li><a href="../index.html">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="../index.html">Item 4</a></li>
  <li><a href="../index.html">Item 5</a></li>
</ul>
 
<script>
$( "#menu" ).menu();
</script>
 
</body>
</html>

Other Extensions