<menu></menu>

ブラウザ
  • Fx
分類 フロー・コンテンツ
利用場所 フロー・コンテンツが置ける場所 / 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要素と対象の要素とを関連付ける必要があります。

  1. menu要素にid属性を指定します。
  2. 対象の要素に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>
  1. menu要素にid属性を指定します。
  2. button要素に type="menu" を指定します。
  3. 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>

表示例

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