<menu>:菜单元素
尝试一下
属性
这个元素只包含全局属性。
使用说明
<menu>
和 <ul>
元素都用于表示无序列表。它们的关键区别在于,<ul>
主要用于显示内容,而 <menu>
则用于交互式内容。相关的 <menuitem>
元素已被弃用。
备注: 在早期版本的 HTML 规范中,<menu>
元素还有一个额外的用例,即作为上下文菜单。此功能被认为已过时,并且不在规范中。
示例
工具栏
在这个示例中,使用 <menu>
元素创建了一个编辑应用程序的工具栏。
HTML
html
<menu>
<li><button onclick="copy()">复制</button></li>
<li><button onclick="cut()">剪切</button></li>
<li><button onclick="paste()">粘贴</button></li>
</menu>
请注意,这在功能上与以下内容没有区别:
html
<ul>
<li><button onclick="copy()">复制</button></li>
<li><button onclick="cut()">剪切</button></li>
<li><button onclick="paste()">粘贴</button></li>
</ul>
CSS
css
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
结果
技术概要
内容分类 | |
---|---|
允许的内容 |
零个或多个 |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 任何接受流式内容的元素。 |
隐含的 ARIA 角色 | list |
允许的 ARIA 角色 | directory (en-US)、group (en-US)、listbox 、menu (en-US)、menubar (en-US)、none (en-US)、presentation (en-US)、radiogroup (en-US)、tablist (en-US)、toolbar (en-US) 或 tree (en-US)。 |
DOM 接口 | HTMLMenuElement (en-US) |
规范
Specification |
---|
HTML Standard # the-menu-element |
浏览器兼容性
BCD tables only load in the browser