©
本文档使用
php中文网手册 发布
这是一项实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
HTML<menu> 元素表示的一组命令，一个用户可以执行或激活命令。这包括可能出现在屏幕顶部的列表菜单，以及上下文菜单，例如点击后可能出现在按钮下方的菜单。
内容类别 | Flow conten 。另外，在列表菜单状态下的 palpable content 。（列表菜单是默认状态，除非上下文菜单状态中的父元素是<menu>。） |
|---|---|
允许的内容 | 如果元素处于列表菜单状态或者零次或多次出现<li>，<script>和<template>：flow content 。如果元素处于上下文菜单状态：按照任意顺序，<menu>（仅限上下文菜单状态），<menuitem>，<hr>，<script>和<template>出现零次或多次。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许父级 | 任何接受 flow content 的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLMenuElement |
属性
这个元素包含全局属性。
label显示给用户的菜单名称。在嵌套菜单中使用，提供一个标签，通过它可以访问子菜单。只能在父元素为上下文菜单 状态中<menu>时指定。
type该属性表示正在声明的菜单种类，可以是两个值中的一个。
context：表示弹出菜单状态，表示通过另一个元素激活的一组命令。这可能是由一个元素的menu属性引用的按钮菜单<button>，或者是具有属性的元素的上下文菜单contextmenu。如果该属性缺失并且父元素也是元素，则此值是缺省值<menu>。
toolbar：表示工具栏状态，表示由用于用户交互的一系列命令组成的工具栏。这可能是无序的<li>元素列表的形式，或者如果元素没有<li>元素子元素，则流描述可用命令的内容。如果该属性缺失，该值是默认值。
使用说明
在<menu>和<ul>元素都代表项目的无序列表。主要区别在于<ul>主要包含用于显示的项目，同时<menu>用于交互项目，以便执行。
HTML菜单可用于创建上下文菜单（通常通过右键单击另一个元素来激活）或工具栏。
上下文菜单（右键菜单） 包含一个<menu>元素，该元素包含<menuitem>菜单中每个可选选项的<menu>元素，菜单内子菜单的<hr>元素以及将菜单内容分解为多个分区的分隔线元素。然后使用关联元素的contextmenu属性将上下文菜单附加到它们被激活的元素，或者对于附加到<button>元素的按钮激活菜单，将menu属性附加到上下文菜单。
工具栏菜单 由一个<menu>元素组成，其内容以两种方式之一描述：或者作为由<li>元素表示的项目的无序列表（每个表示用户可以使用的命令或选项），或者（如果没有<li>元素），流量内容描述可用的命令和选项。
该元素在HTML4中被弃用，但是在HTML5.1和HTML生活标准中被重新引入。本文档介绍了当前的Firefox实现。根据HTML5.1，类型“列表”可能会更改为“工具栏”。
例子
上下文菜单
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;}结果
菜单按钮
菜单按钮尚未在任何已知的浏览器中实现。
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>
结果
工具栏菜单
工具栏菜单尚未在任何已知的浏览器中实现。
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>
结果
规范
Specification | Status | Comment |
|---|---|---|
WHATWG HTML Living StandardThe definition of '<menu>' in that specification. | Living Standard | |
HTML5.1The definition of '<menu>' in that specification. | Recommendation |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
type="context" | (Yes)1 | 8 (8)2 | (Yes) | No support | (Yes)3 | No support |
type="toolbar" | No support | No support | No support | No support | No support | No support |
Menu buttons | No support | No support | No support | No support | No support | No support |
<hr> to create separators | ? | 51 (51) | No support | No support | ? | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
type="context" | No support | (Yes) | (Yes)4 | No support | No support | No support |
type="toolbar" | No support | No support | No support | No support | No support | No support |
Menu buttons | No support | No support | No support | No support | No support | No support |
<hr> to create separators | No support | No support | 51 (51) | No support | No support | No support |