<menuitem>

ブラウザ ---
分類 ---
利用場所 menu要素type="context"の場合に限る)の子要素として
内容

menuitem要素は、ポップアップメニュー(コンテキストメニュー)の項目を表します。この要素は、menu要素の子要素として使用します。(ただし、menu要素が type="context" の場合に限ります)

  • この要素は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="" メニュー項目のタイプ command 通常のコマンド型 (初期値)
radio ラジオボタン型
checkbox チェックボックス型
label="" メニュー項目のラベル 文字列 ラベルとして表示する文字列
icon="" メニュー項目のアイコン URL アイコン画像のURL
radiogroup="" ラジオボタン型のグループ名 文字列 項目をグループ化するための名前
checked 選択された状態にする checked 値は省略可能
disabled メニュー項目の無効化 disabled 値は省略可能
default デフォルトのメニュー項目 default 値は省略可能
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" 項目のヒント テキスト 任意のテキスト
  • radiogroup属性は、type="radio" の場合にのみ指定することができます。
  • checked属性は、type="radio" または type="checkbox" の場合にのみ指定することができます。

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

実行内容の設定について

項目が選択された際の実行内容は、スクリプトを使って設定することになります。

次の例では、onclick属性を使ってスクリプトが実行されるようにしています。(実際にはスクリプトのコードが入ります)

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

type属性について

type属性は、メニュー項目のタイプを指定します。指定できる値は次の3つです。

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

通常のコマンド型(初期値)

<menuitem type="command" label="メニュー項目" onclick="...">

radio

ラジオボタン型(複数の選択肢から1つだけを選べるタイプ)

<menuitem type="radio" radiogroup="group" label="メニュー項目" onclick="...">

checkbox

チェックボックス型(オン/オフを切り替えられるトグルタイプ)

<menuitem type="checkbox" label="メニュー項目" onclick="...">

label属性について

label属性は、メニュー項目のラベルを指定します。この属性で指定した文字列が、項目名として表示されることになります。

<menuitem label="表示される項目名" onclick="...">

icon属性について

icon属性は、メニュー項目のアイコン画像を指定します。この属性で指定した画像が、メニュー項目に表示されます。

<menuitem label="メニュー項目" icon="example.gif" onclick="...">

  • 大きい画像は縮小して表示されるようです。また、画像は正方形で作成しておいた方が良さそうです。

radiogroup属性について

radiogroup属性は、メニュー項目のグループ名を指定します。複数の項目に同じグループ名を付けることで、1つのグループを作成することができます。

  • この属性は、type="radio" の項目にのみ指定することができます。

次の例では、groupAというグループ名によって、1つのグループを作成しています。この場合、3つの項目の中から1つだけを選択できることになります。

<menuitem type="radio" radiogroup="groupA" label="メニュー項目A-1" onclick="...">
<menuitem type="radio" radiogroup="groupA" label="メニュー項目A-2" onclick="...">
<menuitem type="radio" radiogroup="groupA" label="メニュー項目A-3" onclick="...">

checked属性について

checked属性は、最初から選択された状態を指定します。

  • この属性は、type="radio" または type="checkbox" のメニュー項目にのみ指定することができます。
<menuitem type="checkbox" label="メニュー項目" onclick="..." checked>

disabled属性について

disabled属性は、メニュー項目の無効化を指定します。

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

default属性について

default属性は、初期値となるメニュー項目を指定します。

<menuitem label="メニュー項目" onclick="..." default>
  • 具体的にどのような扱いになるのかは未確認です。

title属性について

menuitem要素にtitle属性を指定すると、そのメニュー項目のヒント(説明)を示すことができます。

<menuitem label="メニュー項目" onclick="..." title="メニュー項目の説明">

ブラウザの対応

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>

使用例

3つのタイプを指定した例

<p contextmenu="exmple1">通常のコマンド型</p>

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


<p contextmenu="exmple2">ラジオボタン型</p>

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


<p contextmenu="exmple3">チェックボックス型</p>

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

表示例

通常のコマンド型

ラジオボタン型

チェックボックス型

  • 対応しているブラウザでは、テキストの上で右クリック(Windowsの場合)すると上記のメニューが表示されます。
icon属性を指定した例

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

<menu type="context" id="exmple4">
<menuitem label="メニュー項目A" icon="image/icon1.gif" onclick="alert('メニュー項目Aのアラート');">
<menuitem label="メニュー項目B" icon="image/icon2.gif" onclick="alert('メニュー項目Bのアラート');">
<menuitem label="メニュー項目C" icon="image/icon3.gif" onclick="alert('メニュー項目Cのアラート');">
</menu>

表示例

ポップアップメニュー

checked属性、disabled属性、default属性、title属性を指定した例

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

<menu type="context" id="exmple5">
<menuitem type="checkbox" label="メニュー項目A" onclick="alert('メニュー項目Aのアラート');" title="メニュー項目Aの説明" checked>
<menuitem type="command" label="メニュー項目B" onclick="alert('メニュー項目Bのアラート');" title="メニュー項目Bの説明" disabled>
<menuitem type="command" label="メニュー項目C" onclick="alert('メニュー項目Cのアラート');" title="メニュー項目Cの説明" default>
</menu>

表示例

ポップアップメニュー