--- title: slug: Web/HTML/Element/menu tags: - HTML - HTML 交互元素 - UX - Web - 元素 - 参考 - 菜单 translation_of: Web/HTML/Element/menu ---
{{HTMLRef}}{{SeeCompatTable}}

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 {{HTMLElement("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 {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.
If the element is in the context menu state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (context menu state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.
Tag omission {{No_Tag_Omission}}
Permitted parents Any element that accepts flow content.
Permitted ARIA roles None
DOM interface {{DOMxRef("HTMLMenuElement")}}

属性

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

{{HTMLAttrDef("label")}} {{Deprecated_inline}}
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 {{HTMLElement("menu")}} in the context menu state.
{{HTMLAttrDef("type")}}
This attribute indicates the kind of menu being declared, and can be one of two values.
  • context {{Deprecated_inline}} : 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 {{HTMLAttrxRef("menu", "button")}} attribute of a {{HTMLElement("button")}} element, or as context menu for an element with a contextmenu 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 {{HTMLElement("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.

使用备注

{{HTMLElement("menu")}} 和 {{HTMLElement("ul")}} 元素都呈现了无序列表元素。最主要的区别是，{{HTMLElement("ul")}} 主要是为了展示选项，而 {{HTMLElement("menu")}} 则是为了交互。

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

{{anch("Context menu", "Context menus")}} consist of a <menu> element which contains {{HTMLElement("menuitem")}} elements for each selectable option in the menu, <menu> elements for submenus within the menu, and {{HTMLElement("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 {{HTMLAttrxRef("contextmenu")}} attribute or, for {{anch("Button menu", "button-activated menus")}} attached to {{HTMLElement("button")}} elements, the {{HTMLAttrxRef("menu", "button")}} attribute.

{{anch("Toolbar", "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 {{HTMLElement("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 的规定，{{HTMLElement("list")}} 元素的类型可能会更改为{{HTMLElement("toolbar")}}。

例子

右键菜单

{{Deprecated_header}}

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

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

结果

{{EmbedLiveSample("Context_menu", "100%", 80)}}

菜单按钮

Menu buttons haven't been implemented in any known browsers yet. The {{HTMLAttrxRef("type", "menu")}} attribute on the <menu> element is now obsolete.

{{HTMLElement("menuitem")}} element is obsolete.

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>

Result

{{EmbedLiveSample("Menu_button", "100%", 50)}}

Toolbar

Toolbar menus haven't been implemented in any known browsers yet.

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>

结果

{{EmbedLiveSample("Toolbar", "100%", 100)}}

规范

规范 状态 备注
{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "<menu>")}} {{Spec2("HTML WHATWG")}} No change from latest snapshot, {{SpecName("HTML5.3")}}
{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "<menu>")}} {{Spec2("HTML5.3")}} No changes
{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "<menu>")}} {{Spec2("HTML5.2")}} Snapshot of the {{SpecName("HTML WHATWG")}}.
Removed the context type.
{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}} {{Spec2("HTML5.1")}} Snapshot of the {{SpecName("HTML WHATWG")}}.
Initial definition.

浏览器兼容性

{{Compat("html.elements.menu")}}

参见

{{HTMLRef}}