<menu> - メニュー

トップ > HTMLリファレンス > <menu>

概要

形式
<menu>~</menu>
サポート
LS / H5.1-5.1 / H2-H4T / e2 / Ch1 / Fx8 / Op?
カテゴリ
フローコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
HTML Living Standard: li要素、スクリプトサポート要素
HTML 5.1: menuitem、hr、menu(type="context")要素、スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

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

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

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

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

属性

グローバル属性
詳細は グローバル属性 を参照してください。
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>ファイルA</li>
  <li>ファイルB</li>
</menu>
表示
  • ファイルA
  • ファイルB
  • 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>
    

    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>
    

    関連項目

    <dir><ul><li><menuitem>

    リンク


    Copyright (C) 1996-2017 杜甫々
    初版:1996年9月10日 最終更新:2017年12月31日
    http://www.tohoho-web.com/html/menu.htm