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>
亲自试一试 »
<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;
}
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
