HTML参考手册
标签 | Elements
menu
这是一项实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
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 |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。