【擬似クラス:target】CSSのみでハンバーガーメニューを作る

スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。

【目次】

JS（クリックイベント）を使ったハンバーガー
CSS（擬似クラス:target）のみのハンバーガー
- HTMLコード
- CSSコード
scroll-behavior: smooth（CSSだけでスムーススクロール）
最後に

JS（クリックイベント）を使ったハンバーガー

これまでのハンバーガーメニュー。こんなです。

ヘッダー右上の開くボタン（三）を押すと右側からハンバーガーメニューが出てきます。メニューの中の閉じるボタン（×）を押すとメニューが閉じる。

HTMLのコード

<nav>
  <div id="open" class="btn"><a href="#g_menu">三</a></div>
  <div id="g_menu" class="outside">
    <div id="close" class="btn"><a href="#">×</a></div>
    <ul>
      <li><a href="#title1">メニュー1</a></li>
      <li><a href="#title2">メニュー2</a></li>
      <li><a href="#title3">メニュー3</a></li>
      <li><a href="#title4">メニュー4</a></li>
      <li><a href="#title5">メニュー5</a></li>
      <li><a href="#title6">メニュー6</a></li>
      <li><a href="#title7">メニュー7</a></li>
    </ul>
  </div>
</nav>

nav要素の中に#openと#g_menuが入っている
#openはハンバーガーメニューの開くボタン（三）
#g_menuにはクラス名.outsideも付いている
#g_menuの中に#closeとulリストが入っている
#closeは閉じるボタン（×）
ulリストはメニュー

開くボタン（三）とメニューが大きな塊で、閉じるボタン（×）はメニューの中に含まれています。

CSSのコード

#g_menu {
  /*中略*/
  transition: right 1s;
  position: fixed;
  top: 0;
}

.outside {
    right: -100%;
}

.inside {
    right: 0;
}

#g_menu:transitionアニメ1秒をpositionのrightにかける
positionはfixed、topの位置は0に
.outside（#g_menuと同じ要素）のpositionのrightを-100%に
.inside（まだHTML上にない）のpositionのrightを0に

メニューにはCSSアニメtransitionとposition: fixed設定。positonの位置はtop設定のみ。

transitionアニメについてはこちらで解説しています。

※参考：スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】 - クモのようにコツコツと

positionのright設定はクラス名.outside、.insideの方に書いています。

.outsideは右に-100%つまり自分の幅分ページの外側に配置されちる。.inside右に0`つまり画面右端だが、まだHTML上にない。

JSのコード

const open = document.querySelector("#open");
const close = document.querySelector("#close");
const g_menu = document.querySelector("#g_menu");

//メニューを出す
open.addEventListener('click', function() {
    g_menu.classList.add('inside');
    g_menu.classList.remove('outside');
 }, false);

//メニューを隠す
close.addEventListener('click', function() {
    g_menu.classList.remove('inside');
    g_menu.classList.add('outside');
 }, false);

変数openと#open、変数closeと#close、変数g_menuと#g_menuを紐付け
openをクリックしたとき、g_menuにクラス名inside追加、クラス名remove削除
closeをクリックしたとき、g_menuにクラス名inside削除、クラス名remove追加

メニューの位置やアニメはすべてCSS上に書いているので、JSではクリックイベントでclass名を追加、削除するだけ。insideを追加するとメニューがページ外から右端に移動する。

これはCSSマリオをジャンプさせた時と同じ方法。

※参考：CSSドット絵マリオをCSSアニメでジャンプさせてみる - クモのようにコツコツと

CSS（擬似クラス:target）のみのハンバーガー

さて、これまではこの方法で作ってきたのですが、擬似クラス:targetを使うとJSなしでCSSのみで実現できそうでした。

※参考：[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点 | コリス

:targetはページ内リンクのaタグをクリックした時に指定先のid名のタグに当たるスタイルです。

実際にやってみた。

どうですか！動作に関しては最初のJSを使ったハンバーガーメニューと全く同じじゃないですか！でも「JS」のタブを開くと1行も書かれていないことがわかります。いったいどう変わったのか？

HTMLコード

<nav>
  <div id="open" class="btn"><a href="#g_menu">三</a></div>
  <div id="g_menu">
    <div id="close" class="btn"><a href="#">×</a></div>
    <ul>
      <li><a href="#title1">メニュー1</a></li>
      <li><a href="#title2">メニュー2</a></li>
      <li><a href="#title3">メニュー3</a></li>
      <li><a href="#title4">メニュー4</a></li>
      <li><a href="#title5">メニュー5</a></li>
      <li><a href="#title6">メニュー6</a></li>
      <li><a href="#title7">メニュー7</a></li>
    </ul>
  </div>
</nav>

#g_menuにあったクラス名.outsideはここでは付いていない

HTML上の違いはほとんどありませんね。#g_menuにクラス名がなくなったくらい。

CSSコード

#g_menu {
  /*中略*/
  transition: right 1s;
  position: fixed;
  top: 0;
}

#g_menu:not(:target) {
    right: -100%;
}

#g_menu:target {
    right: 0;
}

position:のright: -100%は.outsideではなく#g_menu:not(:target)に
positionのright: 0は.insideではなく#g_menu:targetに

ここに擬似クラス:targetが入ります。開くボタン（三）のリンク先は#g_menuなので開くボタンを押した時にページ外にあるメニューが画面右端に移動します。

1行目の:not()は以前こちらで解説しました。

※参考：【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ！ - クモのようにコツコツと

:not(:target)は:target以外、つまり開くボタン（三）を押したとき以外はメニューがページ外という設定。そのため閉じるボタンやメニューをクリックするとページ外に移動します。