SYNCER

SYNCER

＜menu要素＞ - メニュー

公開日:

menu要素は、menuitem要素などと組み合わせて、オリジナルのメニューを作成できる要素です。2017年2月現在、サポートしているブラウザが少ないため、本番環境で利用するのは非推奨です。

概要

名前
menu
カテゴリー
Flow content
Palpable content: type属性がtoolbarの場合のみ。
配置できる場所
Flow contentが期待される場所。
ポップアップメニュー状態にある場合、別の、ポップアップメニュー状態にあるmenu要素の子要素として配置すること。
コンテンツモデル
type属性がtoolbarの場合、0個以上のli要素、および、Script-supporting element。または、Flow content。
type属性がcontextの場合、0個以上のmenuitem要素、0個以上のhr要素、0個以上の、type属性がcontextのmenu要素、0個以上のScript-supporting element。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLMenuElement
デフォルトのスタイル
menu {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 40px;
}
仕様書
https://html.spec.whatwg.org/multipage/forms.html#the-menu-element

属性

type

メニューの種類をキーワードで指定する。

context
コンテキストメニュー。一般的に右クリックで開くメニュー。
toolbar
ツールバー。

label

メニューのラベル。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜menu要素＞ - メニュー</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/menu/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>menu要素は、オリジナルのメニューを作成するための要素です。右クリック時のメニューに項目を追加したりできます。</p>

<div contextmenu="syncer">
	ここで右クリックをして下さい。
</div>

<menu id="syncer" type="context">
	<menuitem>SYNCER1</menuitem>
	<menuitem>SYNCER2</menuitem>
	<menuitem>SYNCER3</menuitem>
	<hr>
	<menuitem>SYNCER4</menuitem>
	<menuitem>SYNCER5</menuitem>
	<menuitem>SYNCER6</menuitem>
</menu>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>