details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する

HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素（summary要素など）を表示することができる。
このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。

今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。

完成予想図

details要素、summary要素

<details>
  <p>コンテンツ</p>
</details>

<details>
  <summary>summary要素</summary>
  <p>コンテンツ</p>
</details>

たったこれだけでアコーディオンメニューをつくることができる。
summary要素を指定しない場合は、デフォルトの文字列（日本語環境だと"詳細"）が表示される。

「クリックしたら子要素のコンテンツを表示できる」という特性を利用して、ドロップダウンメニューを実装する。

details要素でドロップダウンメニューを実装する

<details class="dropdown-menu">
  <summary class="dropdown-title">
    <img src="https://avatars0.githubusercontent.com/u/5305599?s=30" />
    <span>▼</span>
  </summary>
  <ul class="dropdown-items">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>
</details>

/* ドロップダウンメニューのタイトル */
.dropdown-menu {
  position: relative;
}

/* ドロップダウンメニュー */
.dropdown-menu > .dropdown-items {
  position: absolute;
  top: 40px;
  right: 0;

  width: 100px;
  padding: 10px;
  border-radius: 4px;

  background-color: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, .7);
}
/* メニューにつける▲ */
.dropdown-menu > .dropdown-items::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 30px;
  border-bottom: 5px solid white;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

/* ナビゲーションに表示するタイトル */
.dropdown-menu > .dropdown-title {
  cursor: pointer;
  display: flex;
  align-items: center;

  /* デフォルトの▼を消す */
  list-style: none;
}
/* デフォルトの▼を消す:Chrome用 */
.dropdown-menu > .dropdown-title::-webkit-details-marker {
  display: none;
}
/* カスタムの▼ */
.dropdown-menu > .dropdown-title > span {
  margin-left: 10px;
  font-size: 10px;
}


summary.dropdown-titleが表示される部分となる。
ドロップダウンメニューとして使う場合は▼を右側に表示したいので、list-style: none;でデフォルトの▼を非表示にしている。ただしChromeでは動作しないため、summary::-webkit-details-markerという擬似要素を非表示にして対応している。

メニュー部分をそのまま表示するとナビゲーション内に表示されてしまいスタイルが崩れるので、ul.dropdown-itemsにposition: absolute;を指定して表示している。

ちなみにIE/MS Edgeはdetails要素自体対応していないので、もしクロスブラウザ対応が必要ならpolyfillが必要になる。

参考サイト

• <details>: 詳細折りたたみ要素 - MDN
• Using <details> for Menus and Dialogs is an Interesting Idea | CSS-Tricks

以上





written by @bc_rikko