menu要素を試す

1. このページの目的

menu要素を試す。

2. 仕様

The menu element represents a toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.

引用元：4.4.7 The menu element | HTML Standard

menu要素は、（li要素で表される）項目の順不同のリストの形式で、そのコンテンツからなるツールバーを表す。各要素はユーザーが実行またはアクティブにできるコマンドを表す。

引用元：4.4.7 menu要素 | HTML Standard 日本語訳

使用上の注意

<menu> 要素と <ul> 要素はともに順序なしリストの項目を表すものです。主な違いは、 <ul> は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目のためのものです。

HTML メニューは、コンテキストメニュー (一般的に、別の要素を右クリックすると表示される) またはツールバーを作成するために使用することができます。

引用元：<menu> - HTML: HyperText Markup Language | MDN

3. nav 要素との違いは？

nav
ナビゲーションを表す。
menu
そのページでのメニュー(利用可能なオプションのリスト)を表す。

4. デモ

  • Item 1
  • Item 2
  • Item 3
    •

    コード

    HTML

    <menu class="menu1">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</menu>

    CSS

    .menu1 {
  display: flex;
  list-style-type: none;
  background-color: white;
}
.menu1 li {
  padding: 10px;
}
.menu1 li:first-child {
  background-color: #fcffcc;
}
.menu1 li:nth-child(2) {
  background-color: #e6ffcc;
}
.menu1 li:nth-child(3) {
  background-color: #ccfff1;
}

    3. 参考