操作メニューを表す

menu

< menu 【 メニュー 】 属性="属性値">~< /menu >

menu要素は操作メニューを表します。li要素やbutton要素、menuitem要素などと組み合わせて、閲覧者が利用するコンテクストメニューやツールバーを定義できます。HTML5での策定が進んでいましたが、ブラウザーのサポートがそれほど進まず、HTML5の仕様からはずれ、HTML5.1で策定が行われています。

カテゴリー ・インタラクティブコンテンツ
・パルパブルコンテンツ
・フローコンテンツ
・type属性値がtoolbarの場合はインタラクティブコンテンツ
コンテンツモデル ・フローコンテンツ
・type属性値がtoolbarの場合、0個以上のli要素、またはフローコンテンツ
・type属性値がpopupの場合、0個以上menuitem要素、0個以上のhr要素、0個以上のpopup形式となるmenu要素を任意の順序で記述可
・type属性値がpopupの場合、0個以上のスクリプト支援要素
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

label 【ラベル 】

メニューにラベルを与えます。menu要素が入れ子になったとき、子要素になっているメニューのラベルとして使用されます。

type 【タイプ 】

メニューのタイプを指定します。指定できる値は以下の通りです。値が省略された場合、親要素となるmenu要素のtype属性の値がpopupに指定されている場合のみ、popupとして扱われます。それ以外の場合は、toolberとして扱われます。

popup ポップアップメニューとなります。対応するブラウザーでは画面上にポップアップメニューが表示され、閲覧者はそれを操作できます。
toolbar ツールバーとなります（初期値）。対応するブラウザーでは画面上にツールバーが表示され、閲覧者はそれを操作できます。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

以下は、策定中のHTML5.1の仕様に掲載されているmenu要素とmenuitem要素を組み合わせて選択型のポップアップメニューを作成する例です。メニューのタイプはmenu要素のtype属性の値で、メニューの項目はmenuitem要素のtype属性の値で指定しています。この例は、ポップアップメニューを表示して3つのラジオボタンからテキストの揃え位置を選択できる仕組みです。ボタンを押したときの挙動は、onclick属性の値にJavaScriptを記述しています。

なお、menu、menuitem要素に対応しているブラウザーはFirefoxのみですが、2015年1月時点では仕様通りに対応しておらず、正しく表示されません。

<button type="menu" menu=" editmenu">操作メニュー</button>
<menu type="popup" id="editmenu">
  <menuitem type="radio" radiogroup="alignment" checked="checked" label=" 右寄せ" icon="icons/alL.png" onclick="setAlign('left')">
  <menuitem type="radio" radiogroup="alignment" label=" 中央寄せ" icon="icons/alC.png"onclick="setAlign('center')">
  <menuitem type="radio" radiogroup="alignment" label=" 右寄せ" icon="icons/alR.png"onclick="setAlign('right')">
  <hr />
  <menuitem type="command" disabled="alignment" label=" 出力" icon="icons/pub.png"onclick="publish()">
</menu>

関連記事