HTML & CSS

基礎

メニュー

menu要素

  1. 最終更新日：
  2. 公開日：

ボタンを押したときにボタン下部に表示されるメニューを宣言します。button要素のmenu属性で関連付けして使用します。

HTML サンプルコード

<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である場合は必須です。

記事一覧

  1. トップ
  2. HTML & CSS
  3. menu要素