CSSのみでハンバーガーメニューのクリックでメニューの表示・非表示を制御する

今回はCSSのみでハンバーガーメニューのクリックでメニューの表示・非表示を制御する方法を紹介します。
Googleアナリティクスで状況を見ると、サービスサイトにスマホからアクセスがあったのでレスポンシブ対応も兼ねて設定しました。

完成イメージ

まずは完成イメージを以下に示します。

ハンバーガーメニューとも言われる3本線を押すと、下にメニューが表示されます。またハンバーガーメニューを押すと今度は非表示となります。
これらの制御をJavaScriptを使用しないで、CSSのみで対応していきます。

CSSだけで対応する方針

この動作をCSSだけで対応するのに、checkboxの2つの機能を利用して対応します。

checkboxのオンオフによる制御

Input要素のcheckboxを使用して表示・非表示の制御をします。checkboxのオン時にのみ適用できるCSSの疑似クラスで制御します。以下のようなhtmlがあるとします。

    <input id="topHeadNaviToggleCkBox" type="checkbox" class="naviToggleCkbox" value=0>
    <ul class="naviToggleTarget">

このinput要素のcheckboxがオンとなるとき、つまりチェックされた場合の疑似クラス「:checked」を使用してCSSを設定することが可能です。この「:checked」に隣接要素を指定する「+」などを利用することで、その他の要素もオンとなっときだけ適用するスタイルの設定が可能となります。
例えば「.naviToggleTarget」は通常は非表示で、checkboxがオンのときは表示する場合のCSSは以下になります。

.naviToggleCkbox:checked{
    /* チェックされたときのみ適用される checkbox要素 */
}
.naviToggleTarget {
    display: none;
}
.naviToggleCkbox:checked + .naviToggleTarget {
     /* チェックされたときのみ適用される  checkbox要素の次の要素 */
    display: block;
}

labelとcheckboxの連動

checkboxのオンオフによる制御ができることがわかったと思いますが、実際にcheckboxをオンオフするとなるとcheckboxは小さくユーザからすると操作しにくいです。そこでlabelのfor属性を利用します。for属性にはinput要素のid属性を指定すること、そのlabelと関連付けることができます。for属性にcheckboxを指定することで、そのlabel要素をクリックすると、checkboxをオンオフすることができるようになります。

   <label class="naviToggleLabel" for="topHeadNaviToggleCkBox">
    <input id="topHeadNaviToggleCkBox" type="checkbox" class="naviToggleCkbox" value=0>
    <ul class="naviToggleTarget">
     <li class="toggleItemCont">
      <a href="index.html">ホーム</a>
     </li>
    </ul>
   </label>

この設定の場合、input要素自体は非表示にしておき、label要素だけを表示させるようにする対応が多いです。オンオフの制御と合わせることで、label要素のどこかをクリックすることで「.naviToggleTarget」が表示・非表示になり完成イメージのようになります。

対応例

htmlの例は以下のようになります。

  <div class="naviToggleMenuCont">
   <label class="naviToggleLabel" for="topHeadNaviToggleCkBox">
    <div class="naviToggleSwitch">
     <span class="iconToggleSwitch"></span>
    </div>
    <input id="topHeadNaviToggleCkBox" type="checkbox" class="naviToggleCkbox" value=0>
    <ul class="naviToggleTarget">
     <li class="toggleItemCont theme_bg_light theme_bg_hov_dark">
      <a href="index.html">ホーム</a>
     </li>
    </ul>
    <div class="toggleOverlay"></div>
   </label>
  </div>

input要素を非表示になっているとした場合、checkboxがオフのとき見え方は以下のようになります。

赤枠で囲った部分の「.naviToggleSwitch」はハンバーガーメニュー部分です。黄色枠で囲った部分がlabel要素の全体となります。先に説明したようにlabel要素をクリックするとcheckboxがオンオフできるので、実はこの黄色枠のどこかをクリックすれば表示・非表示が切り替わるようになります。ハンバーガーメニュー部分はメニュー表示・非表示ができる印として配置しているだけです。ハンバーガーメニュー自体は画像、アイコンフォント、CSSなどいくつかの対応方法がありますが、今回はハンバーガーメニュー自体の作り方は特に説明しないので好きな方法で対応して下さい。
checkboxがオフのとき見え方は以下のようになります。

赤枠で囲った部分の「.naviToggleTarget」は表示・非表示されるメニュー部分です。黄色枠で囲った部分は「.toggleOverlay」としています。この黄色枠部分は「.naviToggleTarget」と同様にcheckboxにより表示・非表示され、画面に表示される部分でメニュー部分（「.naviToggleTarget」の部分）以外をこの要素になるようにCSSで設定します。これにより、メニュー部分以外をクリックした場合、label要素の子要素である「.toggleOverlay」がクリックされることになり、結果としてcheckboxがオンからオフに切り替わるようになり、メニューが非表示の状態にすることができます。

細かい装飾部分を除いて、メニュー表示・非表示に関わるCSSの設定例は以下のようになります。

.naviToggleCkbox {
    /* checkbox要素は常に非表示 */
    display: none;
}
.naviToggleTarget {
    /* メニュー部分、通常は非表示にする */
    display: none;
}
.naviToggleCkbox:checked + .naviToggleTarget {
     /* checkboxがオンのとき、メニューを表示する  */
    display: block;
    z-index: 20;/* toggleOverlayより上に表示する */
}
.naviToggleCkbox:checked + .naviToggleTarget + .toggleOverlay {
     /* checkboxがオンのとき、メニュー以外の部分  */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;/* naviToggleTargetより下に表示する */
}

checkboxがオンのとき、「.naviToggleTarget」と「.toggleOverlay」にz-indexを指定して、「.naviToggleTarget」を上に表示するようにします。「.naviToggleTarget」は「position: fixed;」にしてtopなどを指定することで、画面全体に表示される状態となります。
このCSSの設定により、メニュー部分の表示・非表示を制御することができます。後はお好みに合わせて装飾を設定して下さい。