ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【比較】details + summaryでハンバーガーメニュー!【checkbox + labelとの違い】

【比較】details + summaryでハンバーガーメニュー!【checkbox + labelとの違い】

「レスポンシブのスマホ用にハンバーガーメニューをつくりたい」

「details + summaryでハンバーガーメニューはできないの?」

悩み

こんな悩みにお答えします。

この記事ではこんなことがわかります。

  • details + summaryを使ったハンバーガーメニューのつくり方
  • checkbox + labelを使ったハンバーガーメニューとの比較

私は、2015年からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
これまでレスポンシブコーディングをしてきており、多くのWebサイトでハンバーガーメニューを設置してきました。

記事を読み終えると、ハンバーガーメニューをつくることができます。

目次
  1. ハンバーガーメニューのつくり方
    1. details + summary (openの状態で制御する)
    2. details + summary (メニューになる要素をdetailsで囲む)
    3. checkbox + label (比較用)
    4. JavaScript(jQuery)
  2. まとめ

ハンバーガーメニューのつくり方

details + summary (openの状態で制御する)

基本的な構造は、checkbox + labelを使ったハンバーガーメニューとほとんど同じです。

しまぶーのIT大学さんが解説されているハンバーガーメニューを参考にdetails + summaryへカスタマイズします。

ハンバーガーメニューのデモ(details + summary)

※ブラウザ幅を1000px以下にするとハンバーガーメニューが動作させることができます。

違いを比較すると以下のとおりです。

details + summary checkbox + label
制御 detailsのopen属性 有/無 checkboxのchecked属性 有/無
開くボタン summary label
閉じるボタン summary:before (:after) label
背景全面(閉じる) summary:after (:before) label

details + summaryを使う場合の開閉ボタンは以下を動作する要素の前に設置します。

//details + summaryの場合

<details>
  <summary>🍔</summary>
</details>
// checkbox + labelの場合

<input id="menu" type="checkbox" />
<label for="menu" class="open">🍔</label>
<label for="menu" class="back"></label>

detailsにopen属性がつくときは表示、open属性が無いときは非表示とします。

//details + summaryの場合

details[open] ~ aside {
  left: 0;
}
details[open] summary:before {
  left: 0;
}
details[open] summary:after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8) !important;
}

checkbox + labelのときは、checkboxにchecked属性がつきます。

// checkbox + labelの場合

input[type="checkbox"]:checked ~ aside {
  left: 0;
}
input[type="checkbox"]:checked ~ .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8) !important;
}
メリット
checkbox + labelより、使うタグが減るのでHTML構造がシンプルになる。
デメリット
IE対応にはpolyfillが必要。(スマホだけなら気にしなくてもいい)

details + summary (メニューになる要素をdetailsで囲む)

メニューになる要素をdetailsで囲むことでもハンバーガーメニューをつくってみます。

ハンバーガーメニューのデモ(details + summary)

※ブラウザ幅を1000px以下にするとハンバーガーメニューが動作させることができます。

<details>
  <summary>🍔</summary>

  <aside>
    <nav>
      <ul>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
        <li>list5</li>
      </ul>
    </nav>
    <div>side footer</div>
  </aside>
</details>

この方法だと疑似要素(:before、:after)を使っても背景全面を閉じるボタンにすることができません。

開閉のスライドのとき、openがあるときは表示、openがないときは非表示を制御する方法が見つからなかったので、閉じるときは非表示になりながら閉じていきます。

detailsにopen属性の有無で自動的に表示/非表示が切り替えることができるので、シンプルな切り替えのときは初心者でもHTMLを書くだけで使えて便利です。

ただ、今わかるかぎりでは動きや見た目のカスタマイズがあまりできないので、現時点ではこちらのやり方でハンバーガーメニューをつくるのは難しいです。

メリット
HTML構造がわかりやすい
デメリット
details + summaryの動作に自由が無いので完璧に思いどおりの動きができない。
IE対応にはpolyfillが必要。(スマホだけなら気にしなくてもいい)

checkbox + label (比較用)

details + summaryでつくるハンバーガーメニューとの比較用に、しまぶーのIT大学さんで解説されているcheckbox + labelを使ったハンバーガーメニューのつくり方です。

GitHubにサンプルコードが公開されています。

詳しい解説は動画を見ていただければわかりやすいですが簡単に説明します。

  • checkboxのon/offをトリガに使う
  • labelのfor属性とcheckboxのid属性をすることで、labelをクリックしたときにcheckboxのon/offが連動する
  • このlabelをcloseボタンと背景全面にすることで閉じるときのパターンが増やすことができる
  • デザインや動きんど細かな動作はCSSで調整する
  • checkboxのon状態「:checked」のとき、隣接「+」、間接「~」セレクタでCSSを指定する

ハンバーガーメニューのデモ(checkbox + label)

※ブラウザ幅を1000px以下にするとハンバーガーメニューが動作させることができます。

メリット
checkbox + labelはIE11でも使える基本的な機能なので、古いブラウザなどでも動かすことができる
デメリット
checkbox + labelが本来の使い方ではないため、HTML構造が複雑で初心者にはわかりにくい。

JavaScript(jQuery)

自分でハンバーガーメニューをつくるのが面倒だったり、JavaScript(jQuery)プラグインで実現できれば細かいことは気にしないという人のためにプラグインを紹介しておきます。

Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

JavaScript(jQuery)がわかる人なら、プラグインを使わなくても、「toggleClass」「addClass」「removeClass」を使うことによって開閉状態の制御をすれば、CSSでハンバーガーメニューをつくることができます。

メリット
HTML構造がわかりやすい
プラグインの使い方さえ知っていれば簡単に設置できる
デメリット
読み込み速度や動作速度がやや重い

基本的な考え方はアコーディオンメニューをつくる方法と同じです。
こちらの記事で解説しています。

HTML、CSS、jQueryでアコーディオン(折りたたみ)をつくる

Webサイトにアコーディオン(折りたたみ)をつくる方法を知りたいですか?この記事では、HTML (details + summary)、CSS (checkbox + label)、jQuery(slideToggle、toggleClass)をつかってアコーディオン(折りたたみ)をつくる方法やそのメリット、デメリットを解説しています。ぜひご覧ください。

まとめ

details + summaryでハンバーガーメニューをつくる方法を解説しました。

メリットは

  • checkbox + labelより、使うタグが減るのでHTML構造がシンプルになる。

デメリットは

  • IE対応にはpolyfillが必要。(スマホだけなら気にしなくてもいい)

details + summaryで使えるCSSがあると、デザインや動きにもっと自由なカスタマイズができるようになると思います。

どう考えてもdetails + summaryのデフォルトの動きだけで、ユーザーやクライアントに納得される可能性は低いので、新しいCSSができることを願います。