menu 要素コンテクストメニューを表す

menu 要素はコンテクストメニューを表します。li 要素hr 要素button 要素menuitem 要素などと組み合わせて閲覧者が利用するメニューを定義することができます。

menu 要素の内容は初期状態では表示されません。実際のメニューの表示については、button 要素に指定した menu 属性値を、menu 要素に付与した id 属性値として指定することで、ボタンの操作によってポップアップメニューを表示したり、任意の要素に、contextmenu 属性を指定し、menu 要素に付与した id 属性値を指定することで、その要素を操作 (右クリックなど) して任意のコンテキストメニューを表示させることが可能になります。

さらに詳細な説明を見る

サンプルソースを見る

menu 要素の仕様

カテゴリ
コンテンツモデル
  • type 属性値が contextの場合、0個以上 menuitem 要素、0個以上の hr 要素、0個以上の type 属性値が context となる menu 要素、0個以上のスクリプト支援要素を任意の順序で
この要素を使用できる文脈
  • フロー・コンテンツが期待される場所
  • type 属性値が context の場合、type 属性値が context の menu 要素の子として
この要素で使用できる属性
DOM インタフェース
interface HTMLMenuElement : HTMLElement {
  attribute DOMString type;
  attribute DOMString label;
};

詳細説明

menu 要素には type 属性を指定することでメニューの表示形式を指定することができます。

type 属性

メニューのタイプは type 属性で指定します。指定できる値は下記の通りです。

属性値 概要
context ポップアップメニューとなります。対応ブラウザでは画面上にポップアップメニューが表示され、閲覧者はそれを操作することができます。

type 属性は省略できますが、初期値は context になります。

label 属性

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

menu 要素内での hr 要素

menu 要素の子孫要素となる hr 要素は、各メニュー項目を区切るセパレータとして機能します。項目の多いメニューを作成する際などに利用することができます。

menu 要素の実装

HTML5.1 勧告仕様に基づいた menu 要素の主要なブラウザソフトにおける実装例は 2016年 12月時点ではまだないようです。

menu 要素のサンプルソース

<button type="menu" value="File" menu="filemenu"></button>
<menu id="filemenu" type="context">
 <menuitem onclick="fnew()" label="New..." />
 <menuitem onclick="fopen()" label="Open..." />
 <menuitem onclick="fsave()" label="Save" />
 <menuitem onclick="fsaveas()" label="Save as..." />
</menu>
<button type="menu" value="Edit" menu="editmenu"></button>
<menu id="editmenu" type="context">
 <menuitem onclick="ecopy()" label="Copy" />
 <menuitem onclick="ecut()" label="Cut" />
 <menuitem onclick="epaste()" label="Paste" />
</menu>
<button type="menu" value="Help" menu="helpmenu"></button>
<menu id="helpmenu" type="context">
 <menuitem onclick="location='help.html'" label="Help" />
 <menuitem onclick="location='about.html'" label="About" />
</menu>
<p>
 <img src="sample.jpeg" contextmenu="samplemenu" alt="画像の説明" />
</p>
<menu type="context" id="samplemenu">
 <menuitem label="画像フィルタ A を適用" onclick="filter.a()" />
 <menuitem label="画像フィルタ B を適用" onclick="filter.b()" />
 <menuitem label="画像フィルタ C を適用" onclick="filter.c()" />
</menu>

W3C HTML5 仕様書

4.11.3 The menu element