4.11.4 menu 要素

Status: Last call for comments

カテゴリー

フロー・コンテンツ

この要素の type 属性が toolbar 状態にある場合：インタラクティブ・コンテンツ

この要素を使うことができるコンテキスト：

フロー・コンテンツが期待される場所

コンテンツモデル：

0 個以上の li 要素、または、

フロー・コンテンツ、のいずれか

コンテンツ属性：

グローバル属性

type

label

DOMインタフェース：

interface HTMLMenuElement : HTMLElement {
           attribute DOMString type;
           attribute DOMString label;
};

menu 要素は、コマンドのリストを表します。

type 属性は列挙属性で、宣言されているメニューの種類を示します。この属性は3つの状態を持ちます。context キーワードは、context menu 状態に相当し、この要素はコンテキスト・メニューであると宣言するものです。toolbar キーワードは、tool bar 状態に相当し、この要素はツールバーであると宣言するものです。この属性は省略することもできます。省略された場合のデフォルトは list 状態となり、この要素はただ単にコマンドのリストに過ぎず、コンテキスト・メニューを宣言するものでも、ツールバーを定義するものでもありません。

menu 要素の type 属性が context menu 状態にあるなら、この要素はコンテキスト・メニューのコマンドを表します。ユーザーは、そのコンテキスト・メニューが有効となっているなら、そのコマンドを実行することができます。

menu 要素の type 属性が toolbar 状態にあるなら、この要素は、ユーザーがすぐに実行することができる有効なコマンドのリストを表します。

menu 要素の type 属性が list 状態にあるなら、この要素は非順序の項目リストを表します（それぞれの項目は li 要素で表されます）。それぞれの項目は、ユーザーが実行したり、有効化することができるコマンドを表します。この要素の子要素に li 要素がなければ、利用可能なコマンドを説明するフロー・コンテンツを表します。

label 属性は、メニューのラベルを与えます。これは、ユーザーエージェントがUIでネストしたメニューを表示するために使われます。例えば、コンテキストメニューに、もう一つメニューを含んでいる場合、ネストしたメニューの label 属性を、サブメニューのラベルとして使うでしょう。

4.11.3.1 イントロダクション

Status: Last call for comments

この節は、非規程です。

menu 要素は、コンテキスト・メニューやツールバーを定義するために使われます。

例えば、次は3つのメニューボタンを伴ったツールバーを表します。それぞれのボタンには、一連の選択肢を伴ったドロップダウン・メニューがあります：

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="fnew()">New...</button>
   <button type="button" onclick="fopen()">Open...</button>
   <button type="button" onclick="fsave()">Save</button>
   <button type="button" onclick="fsaveas()">Save as...</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="ecopy()">Copy</button>
   <button type="button" onclick="ecut()">Cut</button>
   <button type="button" onclick="epaste()">Paste</button>
  </menu>
 </li>
 <li>
  <menu label="Help">
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
  </menu>
 </li>
</menu>

対応ブラウザでは、次のように表示されるでしょう：

古いブラウザでは、3つの項目を伴った黒丸付きのリストのように見えるでしょう。最初の項目には4つのボタンが、2つ目の項目には3つのボタンが、3つ目の項目には、リンクから構成される項目を伴った黒丸が2つネストするはずです。

次では類似のルールバーを実装しています。選択した値に応じてウェブ・サイトにユーザーをリダイレクトするボタンが一つあります。

<form action="redirect.cgi">
 <menu type="toolbar">
  <label for="goto">Go to...</label>
  <menu label="Go">
   <select id="goto">
    <option value="" selected="selected"> Select site: </option>
    <option value="http://www.apple.com/"> Apple </option>
    <option value="http://www.mozilla.org/"> Mozilla </option>
    <option value="http://www.opera.com/"> Opera </option>
   </select>
   <span><input type="submit" value="Go"></span>
  </menu>
 </menu>
</form>

対応ブラウザにおけるビヘイビアは、前述の例に似ていますが、ここでは、古いブラウザのビヘイビアは、サブミット・ボタンを伴った select 要素ひとつから構成されます。このサブミット・ボタンは、ツールバーには現れません。なぜなら、そのボタンは、menu 要素、または、その子である li 要素の直下の子ではないからです。

4.11.3.3 コンテキストメニュー

Status: Last call for comments

contextmenu 属性は、要素のコンテキスト・メニューを与えます。この値は DOM における menu 要素の ID でなければいけません。この属性値を引数にして getElementById() メソッドを呼び出して得られたノードが null または menu 要素でないなら、その要素には、割り当てられたコンテキスト・メニューを持ちません。そうでなければ、その要素は、コンテキスト・メニューが割り当てられたと認識された要素です。

<form name="npc">
 <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

※ 原文：http://www.w3.org/TR/2010/WD-html5-20100624/interactive-elements.html#menus