異なる <menuitem> を持つコンテキスト・メニュー:
<menu type="context" id="mymenu">
<menuitem label="Refresh"
onclick="window.location.reload();" icon="ico_reload.png">
</menuitem>
<menu label="Share on...">
<menuitem label="Twitter"
icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
</menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
</menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
Try it Yourself ❯
<menu> タグは、コマンドのリスト/メニューを定義します。
<menu> タグは、コンテキストメニュー、ツールバー、フォームコントロールとコマンドをリストするために使用します。
表中の数字は、要素を完全にサポートした最初のブラウザ・バージョンを指定しています。
要素 | |||||
---|---|---|---|---|---|
<menu> | Not supported | Not supported | 8.0 (only context menus) |
Not supported | Not supported |
注: <menu> タグは、Firefox のみがサポートしており、コンテキストメニューだけが動作します。
チップ: メニュー・リストのスタイルには CSS を使用します。
<menu> 要素は、HTML 4.01 では非推奨でした。
<menu> 要素は、HTML5 で再定義されました。
= HTML5 で新規追加。
属性 | 値 | 説明 |
---|---|---|
label | text | メニューに表示するラベルを指定する |
type | list toolbar context |
表示するメニューのタイプを指定する |
<menu> タグは、HTML のグローバル属性もサポートします。
<menu> タグは、HTML のイベント属性もサポートします。
HTML DOM リファレンス:Menu オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <menu> 要素を表示しています:
menu {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}