2023/8/22

【CSS】ハンバーガーメニューの実装方法！ばつ(×)印に変化させる

この記事からわかること

CSSのみでハンバーガーメニューの実装方法
コードの解説
ボタンをクリックでばつ(×)印にアニメーションさせるには？

index

[open]

CSSでハンバーガーメニューアイコンを実装する方法
ボタンクリック時にばつ印にアニメーションさせる

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

CSSでハンバーガーメニューアイコンを実装する方法

サイトのナビゲーション上部に設置されることの多い、ハンバーガーメニューアイコンをCSSのみで実装する方法をまとめていきます。以下例です。

まずはHTML部分を実装します。大枠をdiv要素で囲んで中にspanで三本線用の要素を実装しておきます。

HTML
<div class="p-hamburger">
  <span class="p-hamburger-line"></span>
  <span class="p-hamburger-line"></span>
  <span class="p-hamburger-line"></span>
</div>

CSS側ではdisplay: flexとflex-direction: columnを使用して縦3列に並べておきます。あとは線の太さや長さ、カラーを調整、余白用のmarginを付与すれば完成です。

CSS
.p-hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.p-hamburger-line {
  width: 30px;
  height: 2px;
  background-color: #E87C7C;
  margin: 3px 0;
}

ボタンクリック時にばつ印にアニメーションさせる

ボタンクリック時にハンバーガーメニューからばつ印にアニメーションさせるにはまずHTMLを以下のように書き換えます。input要素とlabelに書き換えて両者がリンクするようにidとforをつけておきます。これでlabelをクリックすることでinput要素にcheckedがつきます。

HTML
<div>
  <input type="checkbox" id="hamburger-checkbox">
  <label class="p-hamburger" for="hamburger-checkbox">
    <span class="p-hamburger-line"></span>
    <span class="p-hamburger-line"></span>
    <span class="p-hamburger-line"></span>
  </label>
</div>

cssはp-hamburger-lineにtransitionを追加します。#hamburger-checkbox:checked+.p-hamburgerでinputがチェックされている(checkedついている)ときの各段をnth-childでそれぞれ指定し傾きを適応させます。

CSS
.p-hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.p-hamburger-line {
  width: 30px;
  height: 2px;
  background-color: #E87C7C;
  margin: 3px 0;
  transition: 0.3s;
}

/* 不要なinputは非表示にする */
#hamburger-checkbox {
  display: none;
}

/* 上段を傾ける */
#hamburger-checkbox:checked+.p-hamburger .p-hamburger-line:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

/* 中段は非表示にする */
#hamburger-checkbox:checked+.p-hamburger .p-hamburger-line:nth-child(2) {
  opacity: 0;
}

/* 下段を傾ける */
#hamburger-checkbox:checked+.p-hamburger .p-hamburger-line:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}