Latest web development tutorials

jQuery UI API - part menu (Menu Widget)

category

Widgets (Widgets)

usage

Description: With the mouse and keyboard interaction for navigation can be themed menu.

New version: 1.9

Menu can be created with any valid tags, as long as the element has a strict parent / child relationship and each entry has an anchor. The most common element is an unordered list ( <ul> ): 

<Ul id = "menu">
  <Li> <a href="#"> Item 1 </a> </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
  <Li> <a href="#"> Item 3 </a>
    <Ul>
      <Li> <a href="#"> Item 3-1 </a> </ li>
      <Li> <a href="#"> Item 3-2 </a> </ li>
      <Li> <a href="#"> Item 3-3 </a> </ li>
      <Li> <a href="#"> Item 3-4 </a> </ li>
      <Li> <a href="#"> Item 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Item 4 </a> </ li>
  <Li> <a href="#"> Item 5 </a> </ li>
</ Ul>

If you use a non <ul> / <li> structure for menus and menu items using the same elements, use menus option to distinguish between the two elements, such as menus: "div.menuElement" .

By adding to the element ui-state-disabled , class to disable any menu item.

icon

To add icons to the menu, include an icon in the tag: 

<Ul id = "menu">
  <Li> <a href="#"> <span class = "ui-icon ui-icon-disk"> </ span> Save </a> </ li>
</ Ul>

Menu (Menu) automatically adds the necessary padding to no icon entry.

Separator

Separator elements can be created by the inclusion of unlinked menu items, menu items only spaces / dashes: 

<Ul id = "menu">
  <Li> <a href="#"> Item 1 </a> </ li>
  <Li> - </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
</ Ul>

Keyboard interaction

  • ENTER / SPACE: call the action menu item has focus, may open a submenu.
  • UP: move to the teachings of a menu item.
  • DOWN: move to the next menu item teachings.
  • RIGHT: If available, then open the submenu.
  • LEFT: Close the current sub-menu, move the focus to the parent menu item. If the focus is not on the sub-menu, nothing is done.
  • ESCAPE: Close the current sub-menu, move the focus to the parent menu item. If the focus is not on the sub-menu, nothing is done.

Enter a letter, move the cursor to the first entry beginning with that letter. Repeat the same character will cycle through the matching entries. At one time you enter more characters match the entered character.

Disable items available keyboard focus, but does not allow any interaction.

Theming

Menu component (Menu Widget) using jQuery UI CSS framework to define the look and feel of its style. If you need to use the specified style menu, you can use the following CSS class name:

  • ui-menu : the outer container of the menu. If the menu contains an icon, the element will additionally with a ui-menu-icons , class.
    • ui-menu-item : a container of individual menu items.
      • ui-menu-icon : through the icons sub-menu icons to set the options.
    • ui-menu-divider : a separator element between menu items.

rely

Additional information

  • The part requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget specified CSS file as a starting point.

Examples

A simple jQuery UI menus (Menu). 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> Menu component (Menu Widget) Demo </ 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="#"> Item 1 </a> </ li>
  <Li> <a href="#"> Item 2 </a> </ li>
  <Li> <a href="#"> Item 3 </a>
    <Ul>
      <Li> <a href="#"> Item 3-1 </a> </ li>
      <Li> <a href="#"> Item 3-2 </a> </ li>
      <Li> <a href="#"> Item 3-3 </a> </ li>
      <Li> <a href="#"> Item 3-4 </a> </ li>
      <Li> <a href="#"> Item 3-5 </a> </ li>
    </ Ul>
  </ Li>
  <Li> <a href="#"> Item 4 </a> </ li>
  <Li> <a href="#"> Item 5 </a> </ li>
</ Ul>
 
<Script>
$ ( "#menu") .menu ();
</ Script>
 
</ Body>
</ Html>