MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

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

使用说明:  <menu><ul> 元素都呈现了无序列表元素。最主要的区别是 <ul> 主要是为了展示选项,而 <menu> 则是为了交互。

注意:这个元素在HTML4中被弃用,但再HTML5.1(正在起草中)中被重新推荐使用。

注意:这份文档描述的是当前Firefox的实现。根据HTML5.1(正在起草中)的规定,<list>元素的类型可能会更改为<toolbar><context>可能会更改为<popup>

  • 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

Specification Status Comment
WHATWG HTML Living Standard
<menu>
Living Standard  
HTML5.1
<menu>
Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ?[1] ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ?[1] ? ? ?

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

See also

文档标签和贡献者

 此页面的贡献者: pantao, holynewbie
 最后编辑者: pantao,