HTML5のリファレンスサイトです。


<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>要素を使用してコンテキストメニューを拡張することができます。

[編集]   [AD]
rentafree.net