目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、listデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、directorygrouplistboxmenumenubarradiogrouptablisttoolbartreepresentationnoneを指定可。
  • リストマーカーが削除されたら、一部のユーザーエージェントは、デフォルトroleからlistを削除することがある。その場合、もし必要ならば、それを回復するために、rolelistを指定することができる。
視覚系ブラウザデフォルトとして期待されるCSS

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

  :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;}
  
視覚系ブラウザにおいて期待されるレンダリング
  • 一般的なツールバーメニューのような外観にするかどうかは、アプリケーション次第である。
意味・用法

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

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

W3C : HTML5.3menu要素は、存在してなかった。

私見・補足

子要素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>
  
表示結果
ツールバー