轻松上手,快乐学习!

HTML <menu> 标签



实例

具有不同 <menuitem> 元素的上下文菜单:

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
亲自试一试 »

定义和用法

<menu> 标签定义命令列表/菜单。

<menu> 标签用于上下文菜单、工具栏以及列出表单控件和命令。


浏览器支持

表中的数字指完全支持该元素的第一个浏览器版本。

元素
<menu> 不支持 不支持 8.0
(only context menus)
不支持 不支持

注释: <menu> 标签仅在 Firefox 中受支持,并且仅适用于上下文菜单。


提示和注释

提示: 使用 CSS 设置菜单列表样式。


属性

属性 描述
label text 指定菜单的可见标签
type list
toolbar
context
指定要显示的菜单类型

全局属性

The <menu> 标签支持 HTML 中的全局属性


事件属性

<menu> 标签也支持 HTML 中的事件属性


相关页面

HTML DOM 参考手册: Menu 对象


默认CSS设置

大多数浏览器将显示具有以下默认值的 <menu> 元素:

menu {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}