<menuitem>
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
<menuitem>
は HTML の要素で、ユーザーがポップアップメニューから呼び出すことができるコマンドを表します。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。
コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義するインダイレクトコマンドで明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を <input type="checkbox">
および <input type="radio">
要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。
属性
この要素にはグローバル属性があります。特に title
属性はコマンドの説明やヒントを出すのに使われます。
checked
非推奨 Non-standard-
コマンドが選択されているか否かを示す論理属性。
type
属性がcheckbox
またはradio
のときのみ使われます。 command
非推奨 Non-standard-
別の要素の ID を指定して、間接的に実行するコマンドを示します。
checked
,disabled
,icon
,label
,radiogroup
,type
属性も含むメニューアイテムで使用してはいけません。 default
非推奨 Non-standard-
この論理属性は、メニューのサブジェクト要素 (
button
やinput
など) と同じコマンドを使用することを示します。 disabled
非推奨 Non-standard-
現在の状態ではコマンドを使用できないことを示す論理属性です。
disabled
はhidden
とは異なりますので注意してください。disabled
属性は、状態の変化によってコマンドが妥当になる状況で適切です。 icon
非推奨 Non-standard-
コマンドを表す画像を提供するために、画像の URL を指定します。
label
-
ユーザーに表示する、コマンドの名前です。
command
属性を提供しない場合は必須です。 radiogroup
非推奨 Non-standard-
この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。
type
属性がradio
である場合に限り使用できます。 type
非推奨 Non-standard-
この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。
command
: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。checkbox
: 2 つの異なる状態を切り替えできるコマンドを表します。radio
: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。
例
HTML
html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>
<menu type="context" id="popup-menu">
<menuitem type="checkbox" checked>Checkbox</menuitem>
<hr />
<menuitem
type="command"
label="This command does nothing"
icon="favicon-192x192.png">
Commands don't render their contents.
</menuitem>
<menuitem
type="command"
label="This command has javascript"
onclick="alert('command clicked')">
Commands don't render their contents.
</menuitem>
<hr />
<menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
<menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
CSS
css
div {
width: 300px;
height: 80px;
background-color: lightgreen;
}
結果
技術的概要
コンテンツカテゴリー | なし。 |
---|---|
許可されている内容 | なし。これは空要素です。 |
タグの省略 | 開始タグが必須で、終了タグはあってはいけません。 |
許可されている親要素 |
ポップアップメニュー状態である <menu>
要素。(<menu> 要素の
type 属性を指定する場合は
popup にしなければなりません。属性がない場合は
<menu>
の親要素自体がポップアップメニュー状態の
<menu> であることが必要です。)
|
許可されている ARIA ロール | なし |
DOM インターフェイス | HTMLMenuItemElement (en-US) |
仕様書
現行のどの仕様書にも含まれていません。
ブラウザーの互換性
どのブラウザーでも対応していません。この要素を唯一対応していたブラウザー Firefox は、85 で対応を削除しました。