命令のメニューを表すには?
menuタグの書式
menuタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
menuタグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
type | メニューの種類を指定します。指定できる値は 「context」:コンテキスト・メニュー 「checkbox」:ツールバー のいずれかになります。 この属性を省略すると、一覧リスト状のコマンドのメニューを表します。 |
label | ユーザに表示するメニューの名前を指定します。 |
menuタグの解説
<menu>は、命令のメニューを表すための要素です。
「type」属性を指定することで、コンテキスト・メニューやツールバーを作成できます。
なお、<menu>における「compact」属性は廃止されましたので、代わりにスタイルシートを使用してください。
menuタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<form action="sample.cgi" method="post">
<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>
</form>
</body>
</html>
menuタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<form name="ehon" action="sample.cgi" method="post">
<label contextmenu="book">おすすめのプログラミング入門書を教えてください。<input name="n" required></label>
<menu type="context" id="book">
<command label="Cの絵本" onclick="location.href='http://books.ank.co.jp/books/2002/c_ehon.html'; ">
<command label="Visual Basicの絵本" onclick="location.href='http://books.ank.co.jp/books/2011/vb_ehon.html'; ">
<command label="C#の絵本" onclick="location.href='http://books.ank.co.jp/books/2008/csharp_ehon.html'; ">
<command label="Javaの絵本" onclick="location.href='http://books.ank.co.jp/books/2005/java_ehon_2.html'; ">
<command label="ASP.NETの絵本" onclick="location.href='http://books.ank.co.jp/books/2010/aspdotnet_ehon.html'; ">
</menu>
<input type="submit" value="送信">
</form>
</body>
</html>
menuタグの関連項目