menu要素とmenuitem要素について【HTML】

menu要素は操作メニューを表す要素で、リストをつくるli要素やbutton要素、menuitem要素などと組み合わせて使います。

menu要素とmenuitem要素について説明したいと思います。

menu要素で使える属性

menu要素では以下のような属性を指定できます。

• label（ラベル）
• type（タイプ）

label（ラベル）

label属性でメニューにラベルを与えることができます。

menu要素が入れ子になったときには、子要素のメニューのラベルとして使われます。

type（タイプ）

type属性でメニューのタイプを指定します。

指定できる値は「popup」もしくは「toolbar」です。

値が省略された場合、親要素となるmenu要素のtype属性の値がpopupに指定されていればpopupとして扱われますが、それ以外のときにはtoolbarとして扱われます。

popup

popupはポップアップメニューを表しており、対応しているブラウザにおいては、画面上にポップアップメニューが表示されます。

toolbar

toolbarはツールバーを表しており、対応しているブラウザにおいては、画面上にツールバーが表示されます。

menuitem要素

menu要素を使ってメニューを作成しますが、そのメニューの項目を表すのがmenuitem要素。

このmenuitem要素は、menu要素のtype属性の値がpopupの場合だけ、menu要素の子要素として使うことができます。

menuitem要素には以下のような属性を指定できます。

• checked（チェックト）
• default（デフォルト）
• disabled（ディスエーブルド）
• command（コマンド）
• icon（アイコン）
• label（ラベル）
• radiogroup（ラジオ・グループ）
• type（タイプ）

checked（チェックト）

checked属性を指定することで、指定されたメニュー項目はあらかじめ選択された状態になります。

これは、type属性の値がcheckboxかradioの場合のみ有効です。

checked属性は値を必要としない論理属性です。

default（デフォルト）

default属性で指定した項目が初期値であることを表します。

default属性は論理属性です。

disabled（ディスエーブルド）

disabled属性を指定すると、操作メニューが無効になります。

disabled属性は論理属性です。

command（コマンド）

input要素に付与されているid属性の値を指定することで、この項目が選択された場合にコマンドを実行することができます。

また、command属性を指定すると、他の属性は指定することはできません。

command属性は論理属性です。

icon（アイコン）

icon属性で閲覧者に対して操作メニューのアイコンを表示することができ、指定には画像ファイルのURLを使います。

label（ラベル）

label属性で操作メニューのラベルを指定することができます。

radiogroup（ラジオ・グループ）

radiogroup属性は、type属性の値がradio（ラジオボタン）のとき、そのラジオボタンを1つのグループにまとめることができる属性です。

グループ化したラジオボタンは同じグループの中で1つだけ選択可能です。

type（タイプ）

type属性でメニュー項目のタイプを指定します。

指定できる値は以下の通り。

command

通常のメニュー項目であることを表します。

もし値が省略された場合やtype属性を持たない場合は、commandが初期値として扱われます。

checkbox

チェックボックスを表していて、選択と未選択を切り替えられます。

radio

ラジオボタンを表していて、radiogroup属性でまとめられたグループのラジオボタンから1つだけ選択可能になります。