非推奨
この機能はウェブ標準から削除されました。まだ対応しているプラウザーがあるかもしれませんが、ゆくゆくはなくなるものです。使用を避け、できれば既存のコードを更新してください。このページの下部にあるブラウザーの対応を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
HTML の <menuitem> 要素は、ユーザーがポップアップメニューから実行できるコマンドをあらわします。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。
コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義するインダイレクトコマンドで明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を <input type="checkbox"> および <input type="radio"> 要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。
| コンテンツカテゴリ | なし。 |
|---|---|
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグが必須で、終了タグはあってはいけません。 |
| 許可されている親要素 | ポップアップメニュー状態である <menu> 要素。(<menu> 要素の type 属性を指定する場合は popup にしなければなりません。属性がない場合は <menu> の親要素自体がポップアップメニュー状態の <menu> であることが必要です。) |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLMenuItemElement |
属性
この要素にはグローバル属性があります。特に title 属性はコマンドの説明やヒントを出すのに使われます。
checked- コマンドが選択されているか否かを示す論理属性。
type属性がcheckboxまたはradioのときのみ使われます。 command- 別の要素の ID を指定して、間接的に実行するコマンドを示します。
checked,disabled,icon,label,radiogroup,type属性も含むメニューアイテムで使用してはいけません。 default- この論理属性は、メニューのサブジェクト要素 (
buttonやinputなど) と同じコマンドを使用することを示します。 disabled- 現在の状態ではコマンドを使用できないことを示す論理属性です。
disabledはhiddenとは異なりますので注意してください。disabled属性は、状態の変化によってコマンドが妥当になる状況で適切です。 icon- コマンドを表す画像を提供するために、画像の URL を指定します。
label- ユーザーに表示する、コマンドの名前です。
command属性を提供しない場合は必須です。 radiogroup- この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。
type属性がradioである場合に限り使用できます。 type- この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。
command: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。checkbox: 2 つの異なる状態を切り替えできるコマンドを表します。radio: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。
例
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="https://developer.cdn.mozilla.net/static/img/favicon144.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 コンテンツ
div {
width: 300px;
height: 80px;
background-color: lightgreen;
}
表示結果
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。