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

基本的な構造は､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で囲むことでもハンバーガーメニューをつくってみます｡

ハンバーガーメニューのデモ(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が必要｡(スマホだけなら気にしなくてもいい)

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

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

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

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

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

メリット

checkbox + labelはIE11でも使える基本的な機能なので､古いブラウザなどでも動かすことができる

デメリット

checkbox + labelが本来の使い方ではないため､HTML構造が複雑で初心者にはわかりにくい｡

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

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

メリット

HTML構造がわかりやすい

プラグインの使い方さえ知っていれば簡単に設置できる

デメリット

読み込み速度や動作速度がやや重い

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