<menu> - メニュー

概要
説明
属性
使用例
関連項目
リンク

概要

形式: <menu>～</menu>
サポート: https://caniuse.com/mdn-html_elements_menu
カテゴリ: フローコンテンツ
親要素: フローコンテンツを子要素に持てるもの
子要素: HTML Living Standard: li要素、スクリプトサポート要素
HTML 5.1: menuitem、hr、menu(type="context")要素、スクリプトサポート要素
タグの省略: 開始タグ:必須 / 終了タグ:必須
属性: グローバル属性

説明

HTML2.0 や HTML4.01 では、<li> と組み合わせてリストメニューを生成するものと定義されていました。HTML4.01 では将来廃止要諦の非推奨(deprecated)な要素として定義されていました。

HTML5 では一度仕様から削除されました。

HTML5.1 では <menu type="context"> の形式で使用し、<menuitem> などと組み合わせて、ポップアップメニュー(コンテキストメニュー)を定義するものとして再定義されています。<menu type="toolbar"> でツールバーの実装も検討されていましたが、仕様には取り込まれませんでした。

HTML 5.2 では再度廃止されました。

HTML Living Standard では <li> と組み合わせてコンテキストメニューを実現するものとして定義されています。

属性

グローバル属性

詳細はグローバル属性を参照してください。

type=type

[非推奨] H5.1-5.1

メニューの種別を指定します。HTML Living Standard では定義されていません。

context: コンテキストメニュー/ポップアップメニュー
toolbar: 仕様検討されていますが、まだ標準化されていません

label=label

[非推奨] H5.1-5.1

ラベルを指定します。HTML Living Standard では定義されていません。

compact

[非推奨] H2-H4T

リストを極力コンパクトな形式で表示します。

使用例

HTML 4.01 では下記の様に使用して、メニューリストを表示するものとして定義されていました。

HTML

<menu>
  <li>ファイルＡ</li>
  <li>ファイルＢ</li>
</menu>

表示

ファイルＡ

ファイルＢ

HTML 5.1 では下記の様に <menuitem> や contextmenu 属性と組み合わせて、マウスを右クリックした際に表示されるコンテキストメニューを定義します。ただし、この機能は HTML 5.2 で廃止されました。Firefox のみでサポートされていますが、HTML 5.1 の仕様では、</menuitem> の閉じタグは不要とされていますが、Firefox の実装では必須となっているようです。<hr> はセパレータを表示します。

HTML

<div contextmenu="menu1">Menu</div>
<menu type="context" id="menu1">
  <menuitem type="command" label="Copy" onclick="alert('Copy')"></menuitem>
  <menuitem type="command" label="Cut" onclick="alert('Cut')"></menuitem>
  <hr>
  <menuitem type="command" label="Paste" onclick="alert('Paste')"></menuitem>
</menu>

HTML Living Standard では、下記の様に用いて、コマンドリストからなるツールバーを定義します。

HTML

<menu>
  <li><button onclick="alert('Copy')">Copy</button></li>
  <li><button onclick="alert('Cut')">Cur</button></li>
  <li><button onclick="alert('Paste')">Paste</button></li>
</menu>

リンク

初版:1996年9月10日最終更新:2017年12月31日

https://www.tohoho-web.com/html/menu.htm

<menu> - メニュー

概要

説明

属性

使用例

関連項目

リンク