`<menu>`: The Menu element

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨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;
}

属性

此元素也接受全局属性。

compact 已弃用: 这个布尔属性暗示列表应以紧凑的样式呈现。对此属性的解释取决于浏览器。请改用 CSS：要实现与 compact 属性类似的效果，可以使用 CSS 属性 line-height 并将其值设置为 80%。

用法说明

<menu> 和 <ul> 元素都表示一个项目列表。关键区别在于，<ul> 主要包含用于显示的条目，而 <menu> 表示一个包含用户可以执行或激活的命令的工具栏。

注意： 在 HTML 规范的早期版本中，<menu> 元素还有一个额外的用例，即作为上下文菜单。此功能已被认为过时，并且不在规范中。

示例

在此示例中，<menu> 用于为编辑应用程序创建工具栏。

HTML

html

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

请注意，这在功能上与

html

<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</ul>

CSS

css

menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

结果

技术摘要

内容类别	流内容无异。如果元素的子项至少包含一个 `<li>` 元素：可感知内容。
允许内容	零个或多个 `<li>`、`<script>` 和 `<template>` 元素。
标签省略	无，起始标签和结束标签都必须存在。
允许父级	任何接受流内容的元素。
隐式 ARIA 角色	`list`
允许的 ARIA 角色	`directory`、`group`、`listbox`、`menu`、`menubar`、`none`、`presentation`、`radiogroup`、`tablist`、`toolbar` 或 `tree`
DOM 接口	`HTMLMenuElement`