<menu>：菜单元素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代，但浏览器将其视为与 <ul> 没有区别（并通过无障碍树暴露）。它表示一个无序列表（由 <li> 元素表示）。
尝试一下
<div class="news">
<a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
属性
这个元素只包含全局属性。
使用说明
<menu> 和 <ul> 元素都用于表示无序列表。它们的关键区别在于，<ul> 主要用于显示内容，而 <menu> 则用于交互式内容。
备注：
在早期版本的 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%;
}
结果
技术概要
规范
| Specification |
|---|
| HTML # the-menu-element |
浏览器兼容性
Loading…