HTML <menu> 元素

HTML <menu> 元素表示用户可以执行或激活的一组命令。这包括可能出现在屏幕顶部的列表菜单，以及上下文菜单，例如在点击按钮后可能会出现的菜单。

通过 <menu> 定义一个上下文（右键）菜单

<div contextmenu="popup-menu">
  右键单击查看菜单
</div>

<menu type="context" id="popup-menu">
  <menuitem>操作</menuitem>
  <menuitem>另一个操作</menuitem>
  <hr>
  <menuitem>分隔开的操作</menuitem>
</menu>

尝试一下 »

特性

内容类别	流式内容。另外，如果在 list menu 状态下，是可触知内容。（list menu 是默认状态，除非父元素是 context menu 状态下的 <menu>。
允许的内容	如果该元素在 list menu 状态下：允许流式内容，或零个到多个 <li>，<script> 和 <template>。如果元素在 context menu 状态下，允许零个到多个，任意顺序的 <menu>（只允许为 context menu 状态），<menuitem>，<hr>，<script> 和 <template>。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	无
DOM 接口	HTMLMenuElement

属性

该元素包含了全局属性。

label

显示给用户的菜单名称。在嵌套菜单中使用，提供可以访问子菜单的标签。只有当在父元素是 context menu 状态下 <menu> 时才必须指定。

type

该属性指示正在声明的菜单类型，可以是两个值之一。

• context：表示弹出菜单状态，通过另一个元素激活的一组命令。这可以是 <button> 元素的 menu 属性，或者作为具有 contextmenu 属性引用的按钮菜单。如果未设置该属性，并且父元素也是一个 <menu> 元素，则该值是默认值。
• toolbar：原来是 list，表示工具栏状态，由用户交互的一系列命令组成的工具栏。这可能是 <li> 元素的无序列表的形式，或者如果该元素的子元素没有 <li> 元素，则是描述可用命令的流式内容。如果未设置设置该属性，则该值为默认值。

事件属性

<menu> 元素支持所有 HTML事件属性。

使用注意

<menu> 和 <ul> 元素都表示无序的项目列表。主要区别在于 <ul> 主要包含要显示的项目，而 <menu> 则用于交互式项目。

可以使用 HTML 菜单创建上下文菜单（通常通过右键单击另一个元素来激活）或工具栏。

然后，使用关联元素的上下文菜单属性或者连接到 <button> 元素的按钮激活菜单，菜单属性将上下文菜单附加到要激活的元素。

上下文菜单 由 <menu> 元素组成，菜单中包含了由 <menuitem> 元素组成的可选项，组成子菜单的 <menu> 元素，以及通过分隔符将菜单内容分隔为多个部分的 <hr> 元素。接着，上下文菜单会关联到可以激活它的元素：

• 关联的元素的 contextmenu 和菜单 id 值相同
• 对于菜单按钮，其 <button> 元素的 menu 属性和菜单 id 值相同

工具栏菜单 由 <menu> 元素组成，其内容以两种方式之一描述：作为由 <li> 元素表示的项目的无序列表（每个元素表示用户可以使用的命令或选项），或（如果有没有 <li> 元素），描述可用命令和选项的流式内容。

这个元素在 HTML 4 中已被弃用，但是在 HTML5.1 和 HTML 现行标准重新引入。本文档介绍了当前的 Firefox 实现。根据 HTML5.1，type 属性的值为 list 可能会更改为 toolbar（注：前面的部分文档已用 toolbar，而不是 list）。

可以使用 CSS 来定义菜单列表样式。

更多实例

上下文菜单

一个有上下文（右键）菜单的 <div> 元素

<style>
  div {
    width: 300px;
    height: 80px;
    background-color: lightgreen;
  }
</style>

<div contextmenu="popup-menu">
  右键单击以查看调整后的上下文菜单
</div>

<menu type="context" id="popup-menu">
  <menuitem>操作</menuitem>
  <menuitem>另一个操作</menuitem>
  <hr>
  <menuitem>分隔开的操作</menuitem>
</menu>

尝试一下 »

菜单按钮

菜单按钮尚未在任何已知的浏览器中实现。

一个按钮，当点击时显示菜单。

<button type="menu" menu="popup-menu">
  下拉
</button>

<menu type="context" id="popup-menu">
  <menuitem>操作</menuitem>
  <menuitem>另一个操作</menuitem>
  <hr>
  <menuitem>分隔开的操作</menuitem>
</menu>

尝试一下 »

工具栏菜单

工具栏按钮尚未在任何已知的浏览器中实现。

一个简单编辑器的上下文菜单，包含两个菜单按钮。

<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">文件</button>
    <menu type="context" id="file-menu">
      <menuitem label="新建..." onclick="newFile()">
      <menuitem label="保存..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">编辑</button>
    <menu type="context" id="edit-menu">
      <menuitem label="剪切..." onclick="cutEdit()">
      <menuitem label="复制..." onclick="copyEdit()">
      <menuitem label="粘贴..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <menu> 的定义	现行的标准	-
HTML 5.1 <menu> 的定义	推荐	-

HTML 4.01 与 HTML5 之间的差异

HTML 4.01 的 <menu> 元素已废弃。

HTML5 中 <menu> 元素已被重新定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 不支持嵌套菜单。

2. 该特性由 Enable Experimental Web Platform Features 首选项控制（需要设置为 true）。

相关链接

• 其他列表相关的 HTML 元素：<ol>，<ul>，<li>，<hr> 和已过时的<dir>。
• contextmenu 全局属性可以用于元素来引用 type 为 context 的 <menu> 的 id。