HTML 中文開發手冊

menu (Elements) - HTML 中文開發手冊

這是一項實驗技術

由於該技術的規格不穩定，請檢視各種瀏覽器的相容性表格以供使用。另外請注意，隨著規範的變化，實驗技術的語法和行為在未來版本的瀏覽器中可能會發生變化。

HTML<menu> 元素表示的一組命令，一個使用者可以執行或啟用命令。這包括可能出現在螢幕頂部的列表選單，以及上下文選單，例如點選後可能出現在按鈕下方的選單。

屬性

這個元素包含全域性屬性。

label顯示給使用者的選單名稱。在巢狀選單中使用，提供一個標籤，通過它可以訪問子選單。只能在父元素為上下文選單 狀態中<menu>時指定。

type該屬性表示正在宣告的選單種類，可以是兩個值中的一個。

context：表示彈出選單狀態，表示通過另一個元素啟用的一組命令。這可能是由一個元素的menu屬性引用的按鈕選單<button>，或者是具有屬性的元素的上下文選單contextmenu。如果該屬性缺失並且父元素也是元素，則此值是預設值<menu>。toolbar：表示工具欄狀態，表示由用於使用者互動的一系列命令組成的工具欄。這可能是無序的<li>元素列表的形式，或者如果元素沒有<li>元素子元素，則流描述可用命令的內容。如果該屬性缺失，該值是預設值。

使用說明

在<menu>和<ul>元素都代表專案的無序列表。主要區別在於<ul>主要包含用於顯示的專案，同時<menu>用於互動專案，以便執行。

HTML選單可用於建立上下文選單（通常通過右鍵單擊另一個元素來啟用）或工具欄。

上下文選單（右鍵選單） 包含一個<menu>元素，該元素包含<menuitem>選單中每個可選選項的<menu>元素，選單內子選單的<hr>元素以及將選單內容分解為多個分割槽的分隔線元素。然後使用關聯元素的contextmenu屬性將上下文選單附加到它們被啟用的元素，或者對於附加到<button>元素的按鈕啟用選單，將menu屬性附加到上下文選單。

工具欄選單 由一個<menu>元素組成，其內容以兩種方式之一描述：或者作為由<li>元素表示的專案的無序列表（每個表示使用者可以使用的命令或選項），或者（如果沒有<li>元素），流量內容描述可用的命令和選項。

該元素在HTML4中被棄用，但是在HTML5.1和HTML生活標準中被重新引入。本文件介紹了當前的Firefox實現。根據HTML5.1，型別“列表”可能會更改為“工具欄”。

例子

上下文選單

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;
}

結果

選單按鈕

選單按鈕尚未在任何已知的瀏覽器中實現。

HTML內容

<!-- 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>

結果

工具欄選單

工具欄選單尚未在任何已知的瀏覽器中實現。

HTML內容

<!-- 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>

結果

規範

瀏覽器相容性

  HTML 中文開發手冊