最終更新日 
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属性は廃止されました。
・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>
当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。