<menu>
======

**HTML `<menu>` 元素**呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

|  |  |
| --- | --- |
| Content categories | Flow content. Additionally, if in the *list menu* state, palpable content. (*list menu* is the default state, unless the parent element is a `<menu>` in the *context menu* state.) |
| Permitted content | If the element is in the *list menu* state: flow content, or alternatively, zero or more occurrences of `<li>`, `<script>`, and `<template>`.If the element is in the *context menu* state: zero or more occurrences, in any order, of `<menu>` (*context menu* state only), `<menuitem>`, `<hr>`, `<script>`, and `<template>`. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts flow content. |
| Permitted ARIA roles | None |
| DOM interface | `HTMLMenuElement` (en-US) |

属性
--

该元素支持全局属性，以及以下属性。

`label` 
已弃用

The name of the menu as shown to the user. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a `<menu>` in the *context menu* state.

`type`

This attribute indicates the kind of menu being declared, and can be one of two values.

* `context` 
已弃用
 : Indicates the *popup menu* state, which represents a group of commands activated through another element. This might be as a button menu referenced by a `menu` attribute of a `<button>` element, or as context menu for an element with a `contextmenu` (en-US) attribute. This value is the default if the attribute is missing and the parent element is also a `<menu>` element.
* `toolbar`: Indicates the *toolbar* state, which represents a toolbar consisting of a series of commands for user interaction. This might be in the form of an unordered list of `<li>` elements, or, if the element has no `<li>` element children, flow content describing available commands. This value is the default if the attribute is missing.

使用说明
----

`<menu>` 和 `<ul>` 元素都呈现了无序列表元素。最主要的区别是，`<ul>` 主要是为了展示选项，而 `<menu>` 则是为了交互。

An HTML menu can be used to create context menus (typically activated by right-clicking another element) or toolbars.

**Context menus** consist of a `<menu>` element which contains `<menuitem>` elements for each selectable option in the menu, `<menu>` elements for submenus within the menu, and `<hr>` elements for separator lines to break up the menu's content into sections. Context menus are then attached to the element they're activated from using either the associated element's `contextmenu` attribute or, for button-activated menus attached to `<button>` elements, the `menu` attribute.

Toolbar menus consist of a `<menu>` element whose content is described in one of two ways: either as an unordered list of items represented by `<li>` elements (each representing a command or option the user can utilize), or (if there are no `<li>` elements), flow content describing the available commands and options.

这个元素在 HTML4 中被弃用，但在 HTML 5.1 和 HTML living standard 中被重新推荐使用。这份文档描述的是当前 Firefox 上的实现。根据 HTML 5.1 的规定，`<list>` 元素的类型可能会更改为`<toolbar>`。

示例
--

### 右键菜单

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

#### HTML


```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```


#### CSS


```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```


#### 结果

### 菜单按钮

**警告：** Menu buttons haven't been implemented in any known browsers yet. The `type` attribute on the `<menu>` element is now obsolete.

**警告：** `<menuitem>` element is obsolete.

#### HTML


```html
<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">Dropdown</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>
```


#### 结果

### Toolbar

**警告：** Toolbar menus haven't been implemented in any known browsers yet.

#### HTML


```html
<!-- A context menu for a simple editor,
 - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-menu-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他与列表相关的元素：`<ol>`、`<ul>` 和 `<li>`。