<menu>

版本：HTML5

HTML<menu>元素呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

浏览器支持


目前主流浏览器并不支持`<menu>`标签交互功能。

示例

<menu>
	<li><input type="checkbox" />red</li>
	<li><input type="checkbox" />blue</li>
</menu>

red

blue

enu>

标签定义及使用说明

<menu>标签定义了一个命令列表或菜单。当希望列出表单控件时使用该标签。
<menu>标签通常用于文本菜单，工具条和命令列表选项。
<menu>标签，使用 CSS 来定义菜单列表样式。
<menu>和<ul>元素都呈现了无序列表元素，主要是为了展示选项，而<menu>则是为了交互

属性

属性	值	描述	4
autosubmit	true false	如果为 true，那么当表单控件改变时会自动提交。	5
compact	compact_rendering	不支持。请使用 CSS 代替。	4
label HTML5新增	menulabel	为菜单定义一个可见的标注。	5
type HTML5新增	context toolbar list	定义显示那种类型的菜单。默认值是"list"。	5

HTML 4.01 与 HTML5之间的差异

HTML4 的<menu>元素已废弃。

HTML5 中<menu>元素已被重新定义。

全局属性

<menu>标签支持全局属性。

事件属性

<menu>标签支持所有HTML事件属性。

HTML`<menu>`标签使用

两个菜单按钮系列选项实例（"File"和"Edit"）：

<menu type="toolbar">
    <li>
        <menu label="File">
            <button type="button" onclick="file_new()">New...</button>
            <button type="button" onclick="file_open()">Open...</button>
            <button type="button" onclick="file_save()">Save</button>
        </menu>
    </li>
    <li>
        <menu label="Edit">
            <button type="button" onclick="edit_cut()">Cut</button>
            <button type="button" onclick="edit_copy()">Copy</button>
            <button type="button" onclick="edit_paste()">Paste</button>
        </menu>
    </li>
</menu>

//HTML
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr/>
  <menuitem>Separated action</menuitem>
</menu>


//CSS
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

<!-- A context menu for a simple editor, - containing two menu buttons. -->
<menu type="toolbar">
  <li>
    <button type="menu" menu="file-menu">File</button>
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" menu="edit-menu">Edit</button>
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>