目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、listデフォルトrolerole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、grouplistboxmenumenubarradiogrouptablisttoolbartreepresentationnoneを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

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

  :is( dl,menu,ol,ul) menu {
    margin-block-start: 0;
    margin-block-end: 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>
  
表示結果
ツールバー