<menu>
コンテキストメニュー(右クリックメニュー)やツールバーを作成します。
有効な属性
属性名 | 説明 |
type | 下に記載 |
label | 設定文字列がコマンドのラベルとして表示されます。 |
type属性により種類が変わります。
属性値 | 説明 |
context | コンテキストメニューとなります。 |
toolbar | ツールバーとなります。 |
type属性が指定されない場合はlistとなります。
context又はtoolbarの場合はブラウザのコンテキストメニュー及びツールバーが拡張される形で表示されるものと思われます。
コンテキストメニューを作成する場合、
type="context"にしてid属性を設定し、
拡張コンテキストメニューを使用したい要素のcontextmenu属性に<menu>のid属性値を指定します。
<menu>の子要素にはコマンドを定義する要素を入れますが、
<a>,
<button>,
<input>,
<option>,
<command>要素又は、
command属性かaccesskey属性が設定された要素を入れられるようです。
コマンドを定義する要素は
<li>又は
<label>で囲むことができるようです。
子要素が
<hr>又はvalueが空の
<option>の場合区切り線となるようです。
子要素にlabel属性のない<menu>又は
<select>要素がある場合は、その子要素毎に区切り線が引かれるようです。
子要素にlabel属性のある<menu>又は
<optgroup>要素がある場合は、サブメニューとなります。
その他の要素は無視されるものと思われます。
例
<div contextmenu="menu" style="border:1px solid">ここを右クリック</div>
<menu type="context" id="menu">
<command label="コマンド1" onclick="alert('コマンド1')">
<menu label="サブメニュー">
<command label="コマンド2" onclick="alert('コマンド2')">
</menu>
</menu>
実際の表示
ちなみに、現時点(2012年5月29日)では主要ブラウザは開発バージョンも含めて<menu>に完全対応したブラウザはありませんが、
Firefox 8.0以上では
<menuitem>要素を使用してコンテキストメニューを拡張することができます。