<menu> ユーザーが操作可能なメニューを提供する

<menu>タグの説明

<menu>は、ユーザーが操作可能なメニューを提供する場合に使用します。メニューには大きく分けて二つの形式があり、一つは画面に表示されるリスト状のもの。もう一つは右クリックで表示されるようなポップアップ型のコンテキストメニューです。

メニューの形式はtype属性で決定します。この値によって画面上の挙動や内包できる子要素が変わる点に注意して下さい。

この要素の仕様は不確定です。本番環境で使用する祭は、ブラウザの実装状況を確認して下さい。また、コンテキストメニューのパーツとして用意された<menuitem>は非推奨の扱いです。

<menu>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 視覚的な効果は特定されていません。ブラウザの実装状況に依存します。
• 同一のページ内に複数使うことができます。コンテキストメニューの場合、この要素自体を入れ子にすることも許可されています。

<menu>に指定できる主な属性

type

メニューの形式を選択します。現状、選べるのは二種類です。

• toolbar：ユーザーが操作可能なツールバーを提供します。基本的には<li>で項目を作成します。
• context：画面上の要素で起動できるポップアップメニューを提供します。インターフェイスはOSの右クリックメニューのようなものを想定します。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<menu>の使い方とサンプル

type属性にツールバーを選択した場合の例です。標準仕様では実装されていないため、ソースコードのみ掲載します。

<menu type="toolbar">
	<li>
		<button type="button" onclick="menu_play()">再生</button>
		<button type="button" onclick="menu_stop()">停止</button>
		<button type="button" onclick="menu_prev()">前の曲</button>
		<button type="button" onclick="menu_next()">次の曲</button>
		<button type="button" onclick="menu_paus()">一時停止</button>
	</li>
</menu>

type属性にコンテキストメニューを選択した場合は、以下のようなマークアップが想定されます。

<menu type="context" id="menu_sample">
	<menuitem type="command" onclick="menu_play()">再生</menuitem>
	<menuitem type="command" onclick="menu_stop()">停止</menuitem>
	<menuitem type="command" onclick="menu_prev()">前の曲</menuitem>
	<menuitem type="command" onclick="menu_next()">次の曲</menuitem>
	<menuitem type="command" onclick="menu_paus()">一時停止</menuitem>
		<hr>
	<menuitem type="command" onclick="menu_speed(0.5)">0.5倍速</menuitem>
	<menuitem type="command" onclick="menu_speed(1.0)">1.0倍速</menuitem>
	<menuitem type="command" onclick="menu_speed(1.5)">1.5倍速</menuitem>
	<menuitem type="command" onclick="menu_speed(2.0)">2.0倍速</menuitem>
	<menuitem type="command" onclick="menu_speed(3.0)">3.0倍速</menuitem>
</menu>