• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <menu>

    版本:HTML5

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

    浏览器支持

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

    示例

    <menu>
    	<li><input type="checkbox" />red</li>
    	<li><input type="checkbox" />blue</li>
    </menu>
    
  • red
  • blue
  • 标签定义及使用说明

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

    属性

    属性描述45
    autosubmittrue false如果为 true,那么当表单控件改变时会自动提交。5
    compactcompact_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>
    

    两个菜单按钮系列选项实例("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>
    
  • 下篇:<summary>