＜menuitem要素＞ - メニューの項目

公開日: 2017/02/09

menuitem要素は、menu要素で作成するメニューの、個々の項目を表す要素です。2017年2月現在、サポートしているブラウザが少ないため、本番環境で利用するのは非推奨です。

概要

名前: menuitem (Menu item)
カテゴリー: なし。
配置できる場所: context menuの状態にあるmenu要素の子要素として配置すること。
コンテンツモデル: 空、または、テキストノード。
タグの省略: 別のmenuitem要素、またはhr要素、またはmenu要素が後に続く場合、終了タグを省略できる。; または、親要素にこれ以上コンテンツがない場合、終了タグを省略できる。
DOM Interface: HTMLMenuItemElement
仕様書: https://html.spec.whatwg.org/multipage/forms.html#the-menuitem-element

属性

type

項目の種類をキーワードで指定する。

command: キーワード。
checkbox: チェックボックス。
radio: ラジオボタン。

label

項目のラベル。

icon

項目のアイコンを表す、画像ファイルのアドレス。

disabled

この属性を付けると、操作が無効になる。論理属性。

checked

この属性を付けると、チェック済みの状態になる。論理属性。

radiogroup

ラジオボタンのグループ名。

default

この属性を付けると、デフォルトの項目になる。論理属性。

グローバル属性

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

サンプルコード

HTML

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

<p>menu要素は、オリジナルのメニューの個々の項目を表す要素です。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>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/668/"> <meta charset="utf-8"> <title>【デモ】＜menuitem要素＞ - メニューの項目</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/menuitem/"> </head> <body>

<p>menu要素は、オリジナルのメニューの個々の項目を表す要素です。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>

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

<style>

body { background-color: #fff ; }

</style>

</script>