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

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

概述

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

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

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.

实例

实例 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>

结果:

实例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>

结果:

规范

Specification Status Comment
HTML Living Standard
<menu>
Living Standard  
HTML 5.1
<menu>
Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.

参见

文档标签和贡献者

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