menu 要素

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

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

使用上の注意: <menu> 要素と <ul> 要素は共にビュレット付きのリストアイテムを含めるものですが、<ul> 要素はリスト項目の表示を目的とするのに対し、<menu> 要素は対話型のアイテムを含めるものであるという点が異なります。

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

コンテンツカテゴリ フローコンテンツ。加えて、リストメニュー状態である場合はパルパブルコンテンツ (親要素がコンテキストメニュー状態の <menu> でない限り、リストメニューはデフォルトの状態です)。
許可された内容 要素がリストメニュー状態である場合: フローコンテンツまたは 0 個以上の <li> 要素、<script> 要素、<template> 要素。
要素がコンテキストメニュー状態である場合: 任意の順序で、0 個以上の <menu> 要素 (context menu状態に限る)、<menuitem> 要素、<hr> 要素、<script> 要素、<template> 要素。
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フローコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLMenuElement

属性

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

label
ユーザに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素がコンテキストメニュー状態の <menu> である場合に限り、必須です。
type
この属性は定義済みのメニューの種類を示すものであり、以下 2 つの値のいずれかを指定します。
  • context: コンテキストメニュー状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。<button> 要素の menu 属性や、contextmenu 属性を持つ要素を経由することが考えられます。<menu> 要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合のデフォルト値になります。
  • list: リストメニュー状態であり、ユーザと対話するためのコマンドの集合を表します。親要素がコンテキストメニュー状態である場合を除き、値が指定されていない場合のデフォルト値になります。

例 1

<!-- クリックするとメニューを表示するボタン-->
<button type="menu" menu="dropdown-menu">
  Dropdown
</button>

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

表示結果

例 2

<!-- 2 つのメニューボタンを持つ、シンプルなエディタ用のコンテキストメニュー-->
<menu>
  <li>
    <button type="menu" value="File" menu="file-menu">
    <menu type="context" id="file-menu">
      <menuitem label="新規作成..." onclick="newFile()">
      <menuitem label="保存..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="edit-menu">
    <menu type="context" id="edit-menu">
      <menuitem label="カット..." onclick="cutEdit()">
      <menuitem label="コピー..." onclick="copyEdit()">
      <menuitem label="ペースト..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

表示結果

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
The definition of '<menu>' in that specification.
Living Standard  
HTML5.1
The definition of '<menu>' in that specification.
草案 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート ? 未サポート[1] ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 未サポート[1] ? ? ?

[1] Gecko は一部実装していますが、仕様との互換性がありません。bug 1100749 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank
 最終更新者: yyss,