<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"の項目にのみ指定することができます。
次の例では、
というグループ名によって、1つのグループを作成しています。この場合、3つの項目の中から1つだけを選択できることになります。groupA
<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>
使用例
<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の場合）すると上記のメニューが表示されます。
<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>
- 表示例
-
ポップアップメニュー
<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>
- 表示例
-
ポップアップメニュー