menu 要素

HTML <menu> 要素は、ユーザが実行またはアクティブ化可能なコマンドのグループを表します。これはスクリーンの上部にあるリストメニューや、ボタンを押したときにボタンの下部に現れるようなコンテキストメニューを含みます。

注記: この属性は HTML4 で一度廃止され、HTML5.1 (現在策定中) で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。HTML5.1 の草案により、type 属性の 'list' は 'toolbar' に変わるでしょう。

属性

この要素は他の全ての HTML 要素と同じく、グローバル属性をサポートします。

label

ユーザに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素がコンテキストメニュー状態の <menu> である場合に限り、必須です。

type

この属性は定義済みのメニューの種類を示すものであり、以下 2 つの値のいずれかを指定します。

• context: ポップアップメニュー状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。<button> 要素の menu 属性や、contextmenu 属性を持つ要素を経由することが考えられます。<menu> 要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合のデフォルト値になります。
• toolbar: ツールバー状態であり、ユーザと対話するためのコマンドの集合を表します。これは <li> 要素を含む ul 要素のフォームか、子要素として <li> を含まない場合は、コマンドとして利用可能なフローコンテンツです。属性が指定されていない場合のデフォルト値になります。

例

コンテクストメニュー

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>

結果

仕様

ブラウザ実装状況

[1] Experimental Web Platform features 設定に隠して実装されており、コンテキストメニューとしては動作しますが、ボタンメニューとしては動作しません。

[2] コンテキストメニューとしてのみ動作し、ボタンメニューとしては動作しません。

[3] Enable experimental Web Platform features 設定に隠して実装されており、コンテキストメニューとしては動作しますが、ボタンメニューとしては動作しません。

[4] 入れ子のメニューはサポートしていません。

関連情報

• 他のリスト関連 HTML 要素: <ol>、 <ul>、 <li>、及び廃止済の <dir>
• type 属性が context である menu 要素の id 属性を参照する contextmenu グローバル属性