2023/8/22

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

この記事からわかること

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

index

[open]

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

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

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);
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Web制作