最終更新日

menu要素

menu要素は、ツールバーやコンテキストメニューを定義することができます。

type属性は、menu要素で定義するメニューの種類を「list」「context」「toolbar」のいずれかのキーワードで指定します。省略時の既定値は「list」です。

「list」を指定した場合、menu要素が単にメニューコマンドの一覧であり、コンテキストメニューでもツールバーでもないことを示します。この場合、menu要素内の各項目をli要素で指定することで、一覧形式での表示が可能です。

「context」を指定した場合、menu要素はコンテキストメニューのコマンド一覧を表します。この場合、ユーザーは、メニューが利用可能な場面でのみ操作できます。

「toolbar」を指定した場合、menu要素は実行可能なメニューコマンドの一覧をツールバーとして示し、ユーザーはそこから操作することができます。

label属性では、メニューのラベルを指定します。メニューの階層で、折りたたまれているサブメニューの見出しを表す場合などに利用可能です。

menu要素は、HTMLの以前のバージョンでは「メニューのリスト」を作るためのものとして、ul要素と同じ使われ方をされており、「推奨されない」要素となっていました。HTML5では、メニューコマンドの一覧を示す要素として、新たに定義し直されました。

HTML5での変更点
・menu要素はメニューコマンドの一覧を示す要素として、HTML5で新たに定義し直されました。
・compact属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Interactiveコンテンツ(type属性がtoolbar状態の場合)
省略不可 Flowコンテンツを子にできる要素 li要素 / Flowコンテンツ
属性 説明
type list|context|toolbar 定義するメニューの種類を「list」「context」「toolbar」のいずれかのキーワードで指定します。省略時の既定値は「list」です。
label 文字列 メニューのラベルを指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <menu label="注文">
    <li><command type="command" icon="burger.png" onclick="burger()"></li>
    <li><command type="command" icon="cheese.png" onclick="cheese()"></li>
    <li><command type="command" icon="teriyaki.png" onclick="teriyaki()"></li>
  </menu>
</body>
参考文献:W3C HTML5「4.11.4 The menu element」外部リンク
HOME