<menu>:菜单元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代,但浏览器将其视为与 <ul> 没有区别(并通过无障碍树暴露)。它表示一个无序列表(由 <li> 元素表示)。

尝试一下

属性

这个元素只包含全局属性

使用说明

<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%;
}

结果

技术概要

内容分类

流式内容。如果元素的子元素包含至少一个 <li> 元素:可感知内容

允许的内容

零个或多个 <li><script><template>

标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。
隐含的 ARIA 角色 list
允许的 ARIA 角色 directorygrouplistboxmenumenubarnonepresentationradiogrouptablisttoolbartree
DOM 接口 HTMLMenuElement

规范

Specification
HTML Standard
# the-menu-element

浏览器兼容性

BCD tables only load in the browser

参见

  • 其他与列表相关的 HTML 元素:<ol><ul><li>