HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

メニュー

menu要素

ボタンを押したときにボタン下部に表示されるメニューを宣言します。button要素のmenu属性で関連付けして使用します。 ※2016年6月現在、ブラウザによる実装が進んでおらず使用出来ません。

サンプルコード

<button type="menu" menu="view-menu">Menu</button>
<menu type="context" id="view-menu">
	<menuitem label="Action1">
	<menuitem label="Action2">
	<menuitem label="Action3">
</menu>
  • カテゴリー

    フローコンテンツ、type属性に「toolbar」を持つ場合はパルパブルコンテンツ

  • コンテンツモデル

    type属性が「toolbar」の場合:0個以上のli要素か、スクリプトサポート要素、またはフローコンテンツ。
    type属性が「context」の場合:0個以上のmenuitem要素、0個以上のhr要素、type属性が「context」のmenu要素、スクリプトサポート要素。

  • 使用ケース

    フローコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

type

メニューの状態を指定します。

  • context

    button要素のような、menu属性やcontextmenu属性を持つ他要素を経由してアクティブになるグループを現します。menu要素が入れ子になっているとき、親要素で「context」を指定していたら、子要素も「context」がデフォルト値になります。

  • popup

    ポップアップメニュー状態を表します。ブラウザが対応している場合、ポップアップメニューが表示されます。

  • toolbar

    リストメニュー状態を現します。親要素がcontext状態である場合を除いて、値が指定されていない場合はデフォルト値となります。

label

表示するメニュー名を指定します。親要素がcontext状態のmenuである場合は必須です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。