HTML5/アクション/menu要素ポップアップメニューを表す

<menu></menu>

ブラウザ
分類	フロー・コンテンツ
利用場所	フロー・コンテンツが置ける場所 / menu要素の子要素として（ただし、親子とも`type="context"`の場合に限る）
内容	`type="context"`の場合：0個以上のmenuitem要素、0個以上のhr要素、0個以上のmenu要素（`type="context"`に限る）、0個以上のスクリプトサポート要素

menu要素は、ユーザーの操作で表示されるポップアップメニュー（コンテキストメニュー）を表します。

この要素はHTML5で廃止され、HTML 5.1で再定義されました。


<p contextmenu="example">ポップアップメニュー</p>

<menu type="context" id="example">
<menuitem label="メニュー項目A" onclick="...">
<menuitem label="メニュー項目B" onclick="...">
<menuitem label="メニュー項目C" onclick="...">
</menu>

属性		値
任意属性
`type=""`	メニューのタイプ	`context`	ポップアップメニュー（初期値）
`label=""`	サブメニューのラベル	文字列	ラベルとして表示する文字列
グローバル属性
`id=""`	要素のID名	文字列	固有の識別名

以前は type="toolbar" も検討されていましたが、HTML 5.1では廃止されたようです。

menu要素を使用すると、ポップアップメニューを作成することができます。（Windowsの場合は右クリックで表示されるメニュー）

メニューの項目は、この要素内に配置するmenuitem要素で作成することになります。

menu要素を使って作成したメニューは、デフォルトのポップアップメニュー内に追加される形で表示されるようです。

ポップアップメニューの設定方法

ポップアップメニューを機能させるには、menu要素と対象の要素とを関連付ける必要があります。

menu要素にid属性を指定します。
対象の要素にcontextmenu属性を指定して、menu要素に付けたID名を記述します。

次の例では、exampleというID名によって、menu要素と対象の要素を関連付けています。この場合、p要素の上で右クリック（Windowsの場合）すると、設定したポップアップメニューが表示されるようになります。（対応しているブラウザのみ）

<p contextmenu="example">ポップアップメニューを表示させる要素</p>

<menu type="context" id="example">
...
</menu>

type属性について

type属性は、作成するコマンドリストのタイプを指定します。HTML 5.1で指定できる値は次の1つだけです。

context: ポップアップメニューを作成します。

type属性を省略した場合は context が適用されます。

label属性について

label属性は、サブメニューのラベルを指定します。この属性は、入れ子にされたmenu要素にのみ指定する必要があります。

入れ子にされたmenu要素はサブメニューとして機能します。

次の例では、サブメニューにメニュー項目Aというラベルを付けています。この場合、メインメニューにはメニュー項目A、メニュー項目B、メニュー項目Cが並ぶことになります。

<menu type="context" id="example">

<menu type="context" label="メニュー項目A">
<menuitem label="メニュー項目A-1" onclick="...">
<menuitem label="メニュー項目A-2" onclick="...">
<menuitem label="メニュー項目A-3" onclick="...">
</menu>

<menuitem label="メニュー項目B" onclick="...">
<menuitem label="メニュー項目C" onclick="...">

</menu>

メニューの区切り線

menu要素内にhr要素を配置すると、その部分に区切り線を入れることができます。

<menu type="context" id="example">

<menuitem label="メニュー項目A" onclick="...">
<menuitem label="メニュー項目B" onclick="...">
<hr>
<menuitem label="メニュー項目C" onclick="...">

</menu>

ボタンとの関連付け

ボタンのクリックでメニューを表示させたい場合は、次のようにmenu要素とbutton要素を関連付けておきます。

<button type="menu" menu="example">メニューを表示</button>

<menu type="context" id="example">
<menuitem label="メニュー項目A" onclick="...">
<menuitem label="メニュー項目B" onclick="...">
<menuitem label="メニュー項目C" onclick="...">
</menu>

menu要素にid属性を指定します。
button要素に type="menu" を指定します。
button要素にmenu属性を指定して、menu要素に付けたID名を記述します。

上記の例では、exampleというID名によって、menu要素とbutton要素を関連付けています。

ブラウザの対応

2016年12月現在、この機能に対応しているブラウザはまだ存在しないようです。（Firefoxが部分的に対応していますが）

ブラウザが対応した場合には、次のような表示になることが期待されます。

ポップアップメニュー

非準拠のコード

Firefox（50）では、menuitem要素に終了タグを付けることで、ポップアップメニューが機能するようになります。（終了タグがないと1つ目のメニュー項目しか表示されません）

HTML 5.1の仕様では、menuitem要素は空要素となります。そのため、本来は終了タグを付けることはできません。

非準拠のコードなりますが、以下のHTMLコードをコピーしてFirefoxで表示させると、ポップアップメニューの機能を確認することができます。（あくまで確認用としてご利用ください）

<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>

<p contextmenu="test" style="border: 1px #c0c0c0 solid; font-size: 200%; font-weight: bold;">サンプルテキスト</p>

<menu type="context" id="test">

<menu label="メニュー項目A">
<menuitem label="メニュー項目A-1" onclick="alert('メニュー項目A-1のアラート');"></menuitem>
<menuitem label="メニュー項目A-2" onclick="alert('メニュー項目A-2のアラート');"></menuitem>
<menuitem label="メニュー項目A-3" onclick="alert('メニュー項目A-3のアラート');"></menuitem>
</menu>

<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');"></menuitem>
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');"></menuitem>

</menu>

</body>
</html>

HTML 5.1における変更点

要素の定義が微妙に変わりました。（メニュー型のリスト → コマンドのグループ）
要素の定義に、ポップアップメニューの機能が追加されました。（というより、ポップアップメニューだけになりました）
type属性とlabel属性が追加されました。
compact属性が廃止されました。
非推奨ではなくなりました。

使用例

ポップアップメニューを作成した例


<p contextmenu="example1">ポップアップメニュー</p>

<menu type="context" id="example1">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

表示例: ポップアップメニュー

対応しているブラウザでは、テキストの上で右クリック（Windowsの場合）すると上記のメニューが表示されます。

サブメニューを設定した例


<p contextmenu="example2">ポップアップメニュー</p>

<menu type="context" id="example2">

<menu type="context" label="メニュー項目A">
<menuitem label="メニュー項目A-1" onclick="alert('メニュー項目A-1のアラート');">
<menuitem label="メニュー項目A-2" onclick="alert('メニュー項目A-2のアラート');">
<menuitem label="メニュー項目A-3" onclick="alert('メニュー項目A-3のアラート');">
</menu>

<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">

</menu>

表示例: ポップアップメニュー

区切り線を指定した例


<p contextmenu="example3">ポップアップメニュー</p>

<menu type="context" id="example3">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<hr>
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

表示例: ポップアップメニュー

未対応のブラウザでは、区切り線がページ内に表示されてしまいます。

ボタンと関連付けた例


<p><button type="menu" menu="example4">メニューを表示</button></p>

<menu type="context" id="example4">
<menuitem label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');">
</menu>

表示例

対応しているブラウザでは、ボタンをクリックするとメニューが表示されます。