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 プログラミング

【簡単CSS】横・縦スクロールバーを非表示にする方法【Chrome・Safari・Firefox・IE・Edge対応】

2022.03.15
1395
HTMLCSS

CSSだけで自動横スクロールするアニメーションを実装する方法

2022.07.15
614
HTMLCSS

CSSで一部のhtml要素を除く否定疑似クラス:not()の使い方

2022.05.02
101
HTMLCSS

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

更新日:2022.06.08
557