menu - コマンドのリスト

menu要素は、コマンドリストを作成する際に使用します。サブメニューを入れ子にして階層化することもできます。

type属性が contextの場合
context menu状態となり、コンテキスト・メニューのコマンドを表します。そのコンテキスト・メニューが有効となっているなら、そのコマンドを実行することができます。
type属性が toolbarの場合
 toolbar状態となり、ユーザーがすぐに実行することができるコマンドリストを表します。
type属性を省略した場合
 list状態となり、この要素は非順序の項目リストを表します(それぞれの項目は li要素で表します)。これはそれがただのコマンドのリストに過ぎないことを示します。

label属性は、メニューにラベル(項目名)を付けます。
このラベルは、例えば、入れ子にされた階層メニューを、ユーザーエージェントがユーザーインターフェースとして表示する場合などに、サブメニューのラベルとして使用されます。

menu要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
menu - - - - - - - -

menu要素のHTML4からHTML5への変更点

menu要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
type メニューの種類を指定
・context
・toolbar
label メニューにラベル(項目名)を付ける

「list状態」のサンプル

HTMLコード

<menu type="toolbar">
<li>
<menu label="ファイル">
 <button type="button" onclick="fnew()">新規作成</button>
 <button type="button" onclick="fopen()">開く</button>
 <button type="button" onclick="fsave()">上書き保存</button>
 <button type="button" onclick="fsaveas()">名前を付けて保存</button>
</menu>
</li>
<li>
 <menu label="編集">
 <button type="button" onclick="ecopy()">コピー</button>
 <button type="button" onclick="ecut()">切り取り</button>
 <button type="button" onclick="epaste()">貼り付け</button>
 </menu>
</li>
<li>
 <menu label="ヘルプ">
 <li><a href="help.html">ヘルプ</a></li>
 <li><a href="about.html">このウェブサイトについて</a></li>
 </menu>
</li>
</menu> 

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「list状態」のサンプルプレビューを確認

「toolbar状態」のサンプル

3 つのボタンを持ったツールバーの例です。「左寄せ」「センタリング」「右寄せ」のいずれかを選択させます。 テキスト・エディタにあるようなツールバーをイメージすることができるでしょう。 このツールバーは、さらに、セパレータと、それに続いて、 "Publish" とラベル付けされたボタンをもう一つ持ちますが、そのボタンは無効になっています。

HTMLコード

<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="images/alL.png" onclick="setAlign(left)">
<command type="radio" radiogroup="alignment" label="Center" icon="images/alC.png" onclick="setAlign(center)">
<command type="radio" radiogroup="alignment" label="Right" icon="images/alR.png" onclick="setAlign(right)">
<hr>
<command type="command" disabled label="Publish" icon="images/pub.png" onclick="publish()">
</menu>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「toolbar状態」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/interactive-elements.html#menus)