HTML の <menu> 要素は、ユーザーが実行またはアクティブ化可能なコマンドのグループを表します。これはスクリーンの上部にあるリストメニューや、ボタンを押したときにボタンの下部に現れるようなコンテキストメニューを含みます。
| コンテンツカテゴリ | |
|---|---|
| 許可されている内容 |
要素がリストメニュー状態である場合: フローコンテンツまたは0個以上の 要素がコンテキストメニュー状態である場合は、任意の順序で、0個以上の |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLMenuElement |
属性
この要素にはグローバル属性があります。
label- ユーザーに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素がコンテキストメニュー状態の
<menu>である場合に限り、必須です。 type- この属性は定義済みのメニューの種類を示すものであり、以下2つの値のいずれかを指定します。
context: ポップアップメニュー状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。<button>要素のmenu属性や、contextmenu属性を持つ要素を経由することが考えられます。<menu>要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合の既定値になります。toolbar: ツールバー状態であり、ユーザーと対話するための一連のコマンドを表します。これは<li>が並んだ番号なしリストの形か、子要素に<li>を含まない場合は、利用できるコマンドを記述したフローコンテンツです。属性が指定されていない場合の既定値です。
使用上の注意
<menu> 要素と <ul> 要素はともに順序なしリストの項目を表すものですが、 <ul> は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目を含めるためのものです。
HTML メニューは、コンテキストメニュー（一般的に、別の要素を右クリックすると表示される）またはツールバーを作成するために使用できます。
コンテキストメニューは、「メニューで選択可能な項目を表す <menuitem> 要素」「メニュー内のサブメニューを表す <menu> 要素」「メニューの内容をセクションに分けるセパレーター行を表す <hr> 要素」を包含する <menu> 要素で構成されます。. コンテキストメニューは、関連付ける要素の contextmenu 属性、または ボタンでアクティブにするメニュー であれば <button> 要素の menu 属性を使用して、メニューをアクティブ化する要素に紐づけます。
ツールバーメニュー は、以下のいずれかをコンテンツにした <menu> 要素で構成されます: <li> 要素で表した項目の順不同リスト (それぞれの項目が、ユーザーが利用できるコマンドやオプションを表します)。または、(<li> 要素がない場合) 使用なコマンドやオプションを表す フローコンテンツ。
この要素は HTML4 で非推奨になりましたが、 HTML5.1 および HTML living standard で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。 HTML 5.1 によって、type 属性の 'list' が 'toolbar' に変わりました。
例
コンテキストメニュー
非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
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;
}
結果
メニューボタン
メニューボタンを実装しているブラウザーはまだありません。 <menu> 要素の type 属性は廃止されました。
<menuitem> 要素は廃止されました。
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 Living Standard <menu> の定義 |
現行の標準 | 最新のスナップショット Unknown から変更なし |
| HTML 5.1 <menu> の定義 |
勧告 |
ブラウザーの互換性
関連情報
- 他のリスト関連 HTML 要素:
<ol>,<ul>,<li>,<hr>および廃止済の<dir> contextmenuグローバル属性:type="context"がついたmenuのidを参照するために使用することができる