# Menu Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.9
**Description:** 带有鼠标和键盘交互的用于导航的可主题化菜单。
## QuickNav[Examples](#entry-examples)
### Options
+ [disabled](#option-disabled)
+ [icons](#option-icons)
+ [menus](#option-menus)
+ [position](#option-position)
+ [role](#option-role)
### Methods
+ [blur](#method-blur)
+ [collapse](#method-collapse)
+ [collapseAll](#method-collapseAll)
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [expand](#method-expand)
+ [focus](#method-focus)
+ [isFirstItem](#method-isFirstItem)
+ [isLastItem](#method-isLastItem)
+ [next](#method-next)
+ [nextPage](#method-nextPage)
+ [option](#method-option)
+ [previous](#method-previous)
+ [previousPage](#method-previousPage)
+ [refresh](#method-refresh)
+ [select](#method-select)
+ [widget](#method-widget)
### Events
+ [blur](#event-blur)
+ [create](#event-create)
+ [focus](#event-focus)
+ [select](#event-select)
菜单可以用任何有效的标记创建，只要元素有严格的父/子关系且每个条目都有一个锚。最常用的元素是无序列表（`<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>
```
如果使用一个非 `<ul>`/`<li>` 的结构，为菜单和菜单条目使用相同的元素，请使用 [`menus`](#option-menus) 选项来区分两个元素，例如 `menus: "div.menuElement"`。
可通过向元素添加 `ui-state-disabled` class 来禁用任何菜单条目。
### 图标（Icons）
为了向菜单添加图标，请在标记中包含图标：
```
<ul id="menu">
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>
```
菜单（Menu）会自动向无图标的条目添加必要的内边距。
### 分隔符（Dividers）
分隔符元素可通过包含未链接的菜单条目来创建，菜单条目只能是空格/破折号：
```
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li>-</li>
<li><a href="#">Item 2</a></li>
</ul>
```
### 键盘交互（Keyboard interaction）
* ENTER/SPACE：调用获得焦点的菜单项的动作，可能会打开一个子菜单。
* UP：移动教导到上一个菜单项。
* DOWN：移动教导到下一个菜单项。
* RIGHT：如果可用，则打开子菜单。
* LEFT：关闭当前子菜单，移动焦点到父菜单项。如果焦点不在子菜单上，则不进行任何操作。
* ESCAPE：关闭当前子菜单，移动焦点到父菜单项。如果焦点不在子菜单上，则不进行任何操作。
输入一个字母，移动焦点到以该字母开头的第一个条目。重复相同的字符会循环显示匹配的条目。在一个时间内输入更多的字符则匹配所输入的字符。
禁用项可获得键盘焦点，但是不允许任何交互。
### 主题化（Theming）
菜单部件（Menu Widget）使用 [jQuery UI CSS 框架](/theming/css-framework/) 来定义它的外观和感观的样式。如果需要使用菜单指定的样式，则可以使用下面的 CSS class 名称：
* `ui-menu`：菜单的外层容器。如果菜单包含图标，该元素会另外带有一个 `ui-menu-icons` class。
* `ui-menu-item`：单个菜单项的容器。
* `ui-menu-icon`：通过 [`icons`](#option-icons) 选项进行子菜单图标设置。
* `ui-menu-divider`：菜单项之间的分隔符元素。
### 依赖（Dependencies）
* [UI 核心（UI Core）](/category/ui-core/)
* [部件库（Widget Factory）](/jQuery.widget/)
* [定位（Position）](/position/)
### 其他注意事项（Additional Notes:）
* 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
## Options
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为 `true`，则禁用该 menu（菜单）。**Code examples:**
初始化带有指定 `disabled`选项的menu（菜单）
```
$( ".selector" ).menu({ disabled: true });
```
在初始化后，获取或设置`disabled` 选项：
```
// getter
var disabled = $( ".selector" ).menu( "option", "disabled" );
// setter
$( ".selector" ).menu( "option", "disabled", true );
```
### icons**Type:** [Object](http://api.jquery.com/Types/#Object)
**Default:** `{ submenu: "ui-icon-carat-1-e" }`标题要使用的图标，与 [jQuery UI CSS 框架提供的图标（Icons）](/theming/icons/) 匹配。设置为 false 则不显示图标。
* submenu (string, default: "ui-icon-carat-1-e")
**Code examples:**
初始化带有指定 `icons`选项的menu（菜单）
```
$( ".selector" ).menu({ icons: { submenu: "ui-icon-circle-triangle-e" } });
```
在初始化后，获取或设置`icons` 选项：
```
// getter
var icons = $( ".selector" ).menu( "option", "icons" );
// setter
$( ".selector" ).menu( "option", "icons", { submenu: "ui-icon-circle-triangle-e" } );
```
### menus**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"ul"`
作为menu（菜单）容器的元素的选择器， 包括子菜单。
**注意:** 初始化后 `menus`选项不应该被更改。 现有的子菜单将不会被更新。**Code examples:**
初始化带有指定 `menus`选项的menu（菜单）
```
$( ".selector" ).menu({ menus: "div" });
```
获取 `menus` 选项：
```
// getter
var menus = $( ".selector" ).menu( "option", "menus" );
```
### position**Type:** [Object](http://api.jquery.com/Types/#Object)
**Default:** `{ my: "left top", at: "right top" }`标识建议菜单的位置与相关的 input 元素有关系。`of` 选项默认为 input 元素，但是您可以指定另一个定位元素。如需了解各种选项的更多细节，请查看 [jQuery UI Position](/position/)。**Code examples:**
初始化带有指定 `position`选项的menu（菜单）
```
$( ".selector" ).menu({ position: { my: "left top", at: "right-5 top+5" } });
```
在初始化后，获取或设置`position` 选项：
```
// getter
var position = $( ".selector" ).menu( "option", "position" );
// setter
$( ".selector" ).menu( "option", "position", { my: "left top", at: "right-5 top+5" } );
```
### role**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"menu"`
自定义用于菜单和菜单项的ARIA roles（愚人码头注：关于[ARIA roles](http://www.w3.org/TR/wai-aria/roles)）。 在默认情况下菜单项使用`"menuitem"`。 设置`role`选项为了使`"listbox"`使用`"option"`作为菜单项。 如果设置为`null`， 没有roles将被设置，如果菜单是由被保持焦点另一个元件控制时候，非常有用。
**注意:** 初始化后`role`选项 不应该被更改。 现有（子）菜单和菜单项将不会被更新。**Code examples:**
初始化带有指定 `role`选项的menu（菜单）
```
$( ".selector" ).menu({ role: null });
```
获取 `role` 选项：
```
// getter
var role = $( ".selector" ).menu( "option", "role" );
```
## Methods
### blur( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
从菜单中删除焦点， 重置任何激活样式 和 触发菜单的 [`blur`](#event-blur) 事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发了菜单失去焦点。
**Code examples:**
调用 blur 方法：
```
$( ".selector" ).menu( "blur" );
```
### collapse( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
关闭当前活动的子菜单。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发关闭子菜单
**Code examples:**
调用 collapse 方法：
```
$( ".selector" ).menu( "collapse" );
```
### collapseAll( [event ] [, all ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
关闭全部打开的子菜单。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发关闭子菜单。
* **all**Type: [Boolean](http://api.jquery.com/Types/#Boolean)表示所有子菜单是否应该被关闭 或 只有子菜单中包括的菜单 或 包含触发事件的目标元素。
**Code examples:**
调用 collapseAll 方法：
```
$( ".selector" ).menu( "collapseAll", null, true );
```
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全移除 menu 功能. 这将使元素返回到之前的初始化状态.
* 该方法不接受任何参数。
**Code examples:**
调用 destroy 方法：
```
$( ".selector" ).menu( "destroy" );
```
### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
禁用 menu.
* 该方法不接受任何参数。
**Code examples:**
调用 disable 方法：
```
$( ".selector" ).menu( "disable" );
```
### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
启用 menu.
* 该方法不接受任何参数。
**Code examples:**
调用 enable 方法：
```
$( ".selector" ).menu( "enable" );
```
### expand( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
打开当前活动项目下的子菜单下，如果有的话。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么时间触发打开子菜单。
**Code examples:**
调用 expand 方法：
```
$( ".selector" ).menu( "expand" );
```
### focus( [event ], item )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
激活一个特定的菜单项， 首先，如果打开存在的任何子菜单，并触发菜单的[`focus`](#event-focus)事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发了菜单项获得焦点。
* **item**Type: [jQuery](http://api.jquery.com/Types/#jQuery)要获取焦点/激活的菜单项
**Code examples:**
调用 focus 方法：
```
$( ".selector" ).menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
```
### isFirstItem()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
返回一个布尔值，说明当前活动项目是否菜单的第一项。
* 该方法不接受任何参数。
**Code examples:**
调用 isFirstItem 方法：
```
var firstItem = $( ".selector" ).menu( "isFirstItem" );
```
### isLastItem()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
返回一个布尔值，说明当前活动项目是否菜单的最后一项。
* 该方法不接受任何参数。
**Code examples:**
调用 isLastItem 方法：
```
var lastItem = $( ".selector" ).menu( "isLastItem" );
```
### next( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
移动激活状态到下一个菜单项。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发焦点转移。
**Code examples:**
调用 next 方法：
```
$( ".selector" ).menu( "next" );
```
### nextPage( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
移动激活状态到第一个菜单项下的可滚动菜单的底部，或最后一个项目，如果不可滚动。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发焦点转移。
**Code examples:**
调用 nextPage 方法：
```
$( ".selector" ).menu( "nextPage" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
获取当前与指定的 `optionName` 关联的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项的名称。
**Code examples:**
调用该方法：
```
var isDisabled = $( ".selector" ).menu( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个包含键/值对的对象，键/值对表示当前 menu 选项哈希。
* 该方法不接受任何参数。
**Code examples:**
调用该方法：
```
var options = $( ".selector" ).menu( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置与指定的 `optionName` 关联的 menu 选项的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置的选项的名称。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要为选项设置的值。
**Code examples:**
调用该方法：
```
$( ".selector" ).menu( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
为 menu 设置一个或多个选项。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要设置的 option-value 对。
**Code examples:**
调用该方法：
```
$( ".selector" ).menu( "option", { disabled: true } );
```
### previous( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
移动激活状态到上一个菜单项。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发焦点转移。
**Code examples:**
调用 previous 方法：
```
$( ".selector" ).menu( "previous" );
```
### previousPage( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
移动激活状态到第一个菜单项下的可滚动菜单的顶部，或第一一个项目，如果不可滚动。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发焦点转移。
**Code examples:**
调用 previousPage 方法：
```
$( ".selector" ).menu( "previousPage" );
```
### refresh()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
初始化还没有被初始化的子菜单和菜单项。 新的菜单项， 包括子菜单可以被添加到菜单 或 所有的菜单的内容可以被替换 然后使用`refresh()`方法初始化。
* 该方法不接受任何参数。
**Code examples:**
调用 refresh 方法：
```
$( ".selector" ).menu( "refresh" );
```
### select( [event ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
选择当前活动的菜单项， 折叠所有子菜单 并触发菜单中的 [`select`](#event-select) 事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)什么事件触发选择。
**Code examples:**
调用 select 方法：
```
$( ".selector" ).menu( "select" );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个包含 button 的 `jQuery` 对象。
* 该方法不接受任何参数。
**Code examples:**
调用 widget 方法：
```
var widget = $( ".selector" ).menu( "widget" );
```
## Events
### blur( event, ui )Type: `menublur`
当menu失去焦点时触发这个事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [jQuery](http://api.jquery.com/Types/#jQuery)当前激活的菜单项。
**Code examples:**
初始化带有指定 blur 回调的 menu：
```
$( ".selector" ).menu({
blur: function( event, ui ) {}
});
```
绑定一个事件监听器到 menublur 事件：
```
$( ".selector" ).on( "menublur", function( event, ui ) {} );
```
### create( event, ui )Type: `menucreate`
当创建 menu 时触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui` 对象是空的，这里包含它是为了与其他事件保持一致性。_
**Code examples:**
初始化带有指定 create 回调的 menu：
```
$( ".selector" ).menu({
create: function( event, ui ) {}
});
```
绑定一个事件监听器到 menucreate 事件：
```
$( ".selector" ).on( "menucreate", function( event, ui ) {} );
```
### focus( event, ui )Type: `menufocus`
当当一个菜单获得焦点或当任意一个菜单项被激活时触发这个事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [jQuery](http://api.jquery.com/Types/#jQuery)当前激活的菜单项。
**Code examples:**
初始化带有指定 focus 回调的 menu：
```
$( ".selector" ).menu({
focus: function( event, ui ) {}
});
```
绑定一个事件监听器到 menufocus 事件：
```
$( ".selector" ).on( "menufocus", function( event, ui ) {} );
```
### select( event, ui )Type: `menuselect`
当才安被选中的时候触发该事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [jQuery](http://api.jquery.com/Types/#jQuery)当前激活的菜单项。
**Code examples:**
初始化带有指定 select 回调的 menu：
```
$( ".selector" ).menu({
select: function( event, ui ) {}
});
```
绑定一个事件监听器到 menuselect 事件：
```
$( ".selector" ).on( "menuselect", function( event, ui ) {} );
```
## Example:
#### 一个简单的 jQuery UI Menu
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>menu 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>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget