Written by Kasumi

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

ハンバーガーメニューをJavaScript・jQueryを使わず、CSSのみでスマホに実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
CSSだけでハンバーガーメニュー
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

三本線をタップすると、バツマーク(×)に変換されるシンプルなハンバーガーメニューです。

cssのみで再現されてます。

実装方法は以下の通りです。

HTML

<input id="checkbox" type="checkbox">
<label id="menu01" class="menu-trigger" for="checkbox">
  <span></span>
  <span></span>
  <span></span>
</label>

まずはHTMLを準備。

上記コードをコピペします。

CSSのみで再現するのに、input要素のチェックボックス・ラベルを使用します。

CSS

/*チェックボックスを非表示*/
#checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
  }
  .menu-trigger {
    position: relative;
    width: 32px;
    height: 26px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
  }
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #172a22;
    border-radius: 4px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 11px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
/*チェックボックスにチェックが入ったら*/
  #checkbox:checked + label span:nth-of-type(1) {
    transform: translateY(11px) rotate(-45deg);
  }
  #checkbox:checked + label span:nth-of-type(2) {
    opacity: 0;
  }
  #checkbox:checked + label span:nth-of-type(3) {
    transform: translateY(-11px) rotate(45deg);
  }

上記CSSコードをコピペします。

チェックボックスはopacityなど使って非表示。

label要素とその子要素のspanタグにCSSでハンバーガーメニューになるよう装飾。

【labelがタップされたら】という条件を以下擬似要素で再現。

:checked + label

バツマークになるよう装飾。

以上でCSSのみでハンバーガーメニューを実装できます。

他の要素も連動させる

div {
  display: none;
}
#checkbox:checked + label + div {
  display: block;
}

ハンバーガーメニューと連動して他の要素にCSSを追記させるコード例です。

html側でlabel要素のとなりに連動させたい要素(divなど)を配置。

他の要素をdisplay: none;であらかじめ非表示。

checkbox:checked + label + div(他の要素)display: block;にするとハンバーガーメニューと連動した開閉アコーディオンの完成です。

まとめ

jQueryも使って動的に色々カスタマイズしたいという方はこちらの記事をご参考ください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】HTMLのformでリセットボタンを入れる方法

2022.04.17
955
HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
657
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
2395
HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
4269