<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 parent elements Any element that accepts flow content.
• DOM interface HTMLMenuElement

Attributes

This element includes the global attributes.

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: The context menu state, which represents a group of commands activated through another element. This might be through the menu attribute of a <button>, or an element with a contextmenu attribute. When nesting <menu> elements directly within one another, this is the missing value default if the parent is already in this state.
• list: The list menu state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a <menu> in the context menu state.

Examples

Example 1

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="dropdown-menu">
  Dropdown
</button>
<menu type="context" id="dropdown-menu">
  <menuitem label="Action">
  <menuitem label="Another action">
  <hr>
  <menuitem label="Separated action">
</menu>

Result:

Example 2

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

Result:

Specifications

Browser compatibility

^[1] Gecko has some implementation, though it is not compatible to the specification. See bug 1100749.

See also

• Other list-related HTML Elements: <ol>, <ul>, <li> and the obsolete <dir>.
• The contextmenu global attribute can be used on an element to refer to the id of a menu with the context type.