jQuery UI Menu

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>

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 );
```

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) {
  ...
});
```

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.

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

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>.

jQuery UI Menu

Overview

Dependencies

Example

Options

disabled

Code examples

Events

focus

Code examples

blur

Code examples

select

Code examples

Methods

destroy

disable

enable

option

option

widget

refresh

Theming

Sample markup with jQuery UI CSS Framework classes