?
This document uses PHP Chinese website manual Release
這是一項(xiàng)實(shí)驗(yàn)技術(shù)
由于該技術(shù)的規(guī)格不穩(wěn)定，請查看各種瀏覽器的兼容性表格以供使用。另外請注意，隨著規(guī)范的變化，實(shí)驗(yàn)技術(shù)的語法和行為在未來版本的瀏覽器中可能會發(fā)生變化。
HTML<menu> 元素表示的一組命令，一個用戶可以執(zhí)行或激活命令。這包括可能出現(xiàn)在屏幕頂部的列表菜單，以及上下文菜單，例如點(diǎn)擊后可能出現(xiàn)在按鈕下方的菜單。
內(nèi)容類別 | Flow conten 。另外，在列表菜單狀態(tài)下的 palpable content 。（列表菜單是默認(rèn)狀態(tài)，除非上下文菜單狀態(tài)中的父元素是<menu>。） |
|---|---|
允許的內(nèi)容 | 如果元素處于列表菜單狀態(tài)或者零次或多次出現(xiàn)<li>，<script>和<template>：flow content 。如果元素處于上下文菜單狀態(tài)：按照任意順序，<menu>（僅限上下文菜單狀態(tài)），<menuitem>，<hr>，<script>和<template>出現(xiàn)零次或多次。 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父級 | 任何接受 flow content 的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLMenuElement |
屬性
這個元素包含全局屬性。
label顯示給用戶的菜單名稱。在嵌套菜單中使用，提供一個標(biāo)簽，通過它可以訪問子菜單。只能在父元素為上下文菜單 狀態(tài)中<menu>時指定。
type該屬性表示正在聲明的菜單種類，可以是兩個值中的一個。
context：表示彈出菜單狀態(tài)，表示通過另一個元素激活的一組命令。這可能是由一個元素的menu屬性引用的按鈕菜單<button>，或者是具有屬性的元素的上下文菜單contextmenu。如果該屬性缺失并且父元素也是元素，則此值是缺省值<menu>。
toolbar：表示工具欄狀態(tài)，表示由用于用戶交互的一系列命令組成的工具欄。這可能是無序的<li>元素列表的形式，或者如果元素沒有<li>元素子元素，則流描述可用命令的內(nèi)容。如果該屬性缺失，該值是默認(rèn)值。
使用說明
在<menu>和<ul>元素都代表項(xiàng)目的無序列表。主要區(qū)別在于<ul>主要包含用于顯示的項(xiàng)目，同時<menu>用于交互項(xiàng)目，以便執(zhí)行。
HTML菜單可用于創(chuàng)建上下文菜單（通常通過右鍵單擊另一個元素來激活）或工具欄。
上下文菜單（右鍵菜單） 包含一個<menu>元素，該元素包含<menuitem>菜單中每個可選選項(xiàng)的<menu>元素，菜單內(nèi)子菜單的<hr>元素以及將菜單內(nèi)容分解為多個分區(qū)的分隔線元素。然后使用關(guān)聯(lián)元素的contextmenu屬性將上下文菜單附加到它們被激活的元素，或者對于附加到<button>元素的按鈕激活菜單，將menu屬性附加到上下文菜單。
工具欄菜單 由一個<menu>元素組成，其內(nèi)容以兩種方式之一描述：或者作為由<li>元素表示的項(xiàng)目的無序列表（每個表示用戶可以使用的命令或選項(xiàng)），或者（如果沒有<li>元素），流量內(nèi)容描述可用的命令和選項(xiàng)。
該元素在HTML4中被棄用，但是在HTML5.1和HTML生活標(biāo)準(zhǔn)中被重新引入。本文檔介紹了當(dāng)前的Firefox實(shí)現(xiàn)。根據(jù)HTML5.1，類型“列表”可能會更改為“工具欄”。
例子
上下文菜單
HTML內(nèi)容
<!-- 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內(nèi)容
div {
width: 300px;
height: 80px;
background-color: lightgreen;}結(jié)果
菜單按鈕
菜單按鈕尚未在任何已知的瀏覽器中實(shí)現(xiàn)。
HTML內(nèi)容
<!-- A button, which displays a menu when clicked. --><button type="menu" menu="popup-menu"> Dropdown</button><menu type="context" id="popup-menu"> <menuitem>Action</menuitem> <menuitem>Another action</menuitem> <hr> <menuitem>Separated action</menuitem></menu>
結(jié)果
工具欄菜單
工具欄菜單尚未在任何已知的瀏覽器中實(shí)現(xiàn)。
HTML內(nèi)容
<!-- 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>
結(jié)果
規(guī)范
Specification | Status | Comment |
|---|---|---|
WHATWG HTML Living StandardThe definition of '<menu>' in that specification. | Living Standard | |
HTML5.1The definition of '<menu>' in that specification. | Recommendation |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
type="context" | (Yes)1 | 8 (8)2 | (Yes) | No support | (Yes)3 | No support |
type="toolbar" | No support | No support | No support | No support | No support | No support |
Menu buttons | No support | No support | No support | No support | No support | No support |
<hr> to create separators | ? | 51 (51) | No support | No support | ? | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
type="context" | No support | (Yes) | (Yes)4 | No support | No support | No support |
type="toolbar" | No support | No support | No support | No support | No support | No support |
Menu buttons | No support | No support | No support | No support | No support | No support |
<hr> to create separators | No support | No support | 51 (51) | No support | No support | No support |