# jQuery UI Menu

## Overview

Menu ...

### Dependencies

- jQuery UI Core
- jQuery UI Widget

### Example

- Demo
- View Source

Transform a simple list with a few links into a themable menu widget.

    $("ul").menu();

    <!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <link href="http://view.jqueryui.com/menu/themes/base/jquery.ui.menu.css" rel="stylesheet" type="text/css"/>
    <script src="http://view.jqueryui.com/menu/ui/jquery.ui.menu.js"></script>

      <script>
      $(document).ready(function() {
        $("ul").menu();
      });
      </script>
    </head>
    <body style="font-size:62.5%;">
      <ul>
      <li><a href="#">Aberdeen</a></li>
      <li><a href="#">Ada</a></li>
      <li><a href="#">Adamsville</a></li>
      <li><a href="#">Addyston</a></li>
      <li><a href="#">Adelphi</a></li>
    </ul>
    </body>
    </html>

## Options

- ### disabled

  Type:
    Boolean
  Default:
    false

  Disables (true) or enables (false) the menu. Can be set when initialising (first creating) the menu.

  #### Code examples

  Initialize a menu with the `disabled` option specified.

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

  Get or set the `disabled` option, after init.

        //getter
        var disabled = $( ".selector" ).menu( "option", "disabled" );
        //setter
        $( ".selector" ).menu( "option", "disabled", true );

incomplete

## Events

- ### focus

  Type:
    menufocus

  Triggered when a menu item gets mouse (on hover) or keyboard (navigation with cursor keys) focus. ui.item refers to a jQuery object containing the focused menu item (a li-element)

  #### Code examples

  Supply a callback function to handle the `focus` event as an init option.

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

  Bind to the `focus` event by type: `menufocus`.

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

- ### blur

  Type:
    menublur

  Triggered a menu item looses focus.

  #### Code examples

  Supply a callback function to handle the `blur` event as an init option.

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

  Bind to the `blur` event by type: `menublur`.

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

- ### select

  Type:
    menuselect

  Triggered when a menu item was selected. ui.item refers to a jQuery object containing the selected menu item (a li-element).

  #### Code examples

  Supply a callback function to handle the `select` event as an init option.

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

  Bind to the `select` event by type: `menuselect`.

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

## Methods

- ### destroy

  Signature:
    .menu( "destroy" )

  Remove the menu functionality completely. This will return the element back to its pre-init state.

- ### disable

  Signature:
    .menu( "disable" )

  Disable the menu.

- ### enable

  Signature:
    .menu( "enable" )

  Enable the menu.

- ### option

  Signature:
    .menu( "option" , optionName , [value] )

  Get or set any menu option. If no value is specified, will act as a getter.

- ### option

  Signature:
    .menu( "option" , options )

  Set multiple menu options at once by providing an options object.

- ### widget

  Signature:
    .menu( "widget" )

  Returns the .ui-menu element.

- ### refresh

  Signature:
    .menu( "refresh" )

  Renders all non-menu-items as menu-items, called once by _create. Call whenever adding or replacing items in the menu via DOM operations.

incomplete, too

## Theming

The jQuery UI Menu plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified. These classes are highlighed in bold below.

### Sample markup with jQuery UI CSS Framework classes

<ul tabindex="0" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all">
<li role="menuitem" class="ui-menu-item">
<a tabindex="-1" class="ui-corner-all" href="#">Text</a>
</li>
</ul>

Note: This is a sample of markup generated by the menu plugin, not markup you should use to create a menu. The only markup needed for that is <ul>
<li><a href="#">Text</a></li>
</ul>.