menu要素：HTML Living Standard各要素別メモ

概要

カテゴリー

Flow content
Palpable content（1個以上のli要素を含む場合に限る）

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

0個以上のli要素。0個以上のScript-supporting contentの混在も可。

main要素の規定による制限
- main要素を子孫に含んではならない。

属性

グローバル属性

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

デフォルトroleは、list。デフォルトroleをrole属性値に指定することは、推奨されない。
デフォルトrole以外では、group、listbox、menu、menubar、radiogroup、tablist、toolbar、tree、presentation、noneを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS


  menu {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
    padding-inline-start: 40px;
    list-style-type: disc;
    counter-reset: list-item;
  }

  :is( dl,menu,ol,ul) menu {
    margin-block: 0;
  }

  :is( menu,ol,ul) menu {list-style-type: circle;}
  :is( menu,ol,ul) :is( menu,ol,ul) menu {list-style-type: square;}

視覚系ブラウザにおいて期待されるレンダリング

一般的なツールバーメニューのような外観にするかどうかは、ユーザーエージェント次第である。

意味・用法

リストの形式で、その内容からなるツールバーを表す。

リストの各項目の内容は、ユーザーが実行できるコマンドを表す。

私見・補足

子要素のli要素の内容には、コマンドとして、ボタンやリンクなどを配置する。

リストに見出しなどをつける方法は、ul要素と同様なので、そちらを参照。

表示確認

ソース


  <div id="tool">ツールバー</div>
  <menu>
    <li><button type="button" onclick="document.getElementById('tool').style.color='red'">文字を赤くするよ</button></li>
    <li><button type="button" onclick="document.getElementById('tool').style.color='blue'">文字を青くするよ</button></li>
  </menu>

表示結果

ツールバー