ハンバーガーメニューをチェックボックスを使ってCSSだけで作る方法

概要

ヘッダーにあるメニューが三本線のナビゲーションメニューになるレスポンシブサイトをよく見ると思います。

そのハンバーガーメニューを、Javascriptを実装せずに、チェックボックスを使って、CSSだけで実装をする方法です。

サンプル

See the Pen Untitled by take it easy (@take-it-easy) on CodePen.

コーディング方法

HTML

<header>
  <div class="header-wrapper">
    <!-- PCサイト用のメニューなどはココに実装 -->
    
    <!-- ハンバーガーメニュー -->
    <div class="sp-nav-wrapper">
      <div class="sp-nav-outer">
        <!-- ナビゲーションがクリックされたかを判別するためのチェックボックス -->
        <input type="checkbox" id="sp-nav-flg" class="sp-nav-flg">
        <!-- ナビゲーションボタン -->
        <label for="sp-nav-flg" class="sp-nav-btn">
          <span></span>
        </label>
        <!-- メニュー -->
        <ul class="sp-nav-menu">
          <li><i class="fa-solid fa-circle-chevron-right"></i>ホーム</li>
          <li><i class="fa-solid fa-circle-chevron-right"></i>会社概要</li>
          <li><i class="fa-solid fa-circle-chevron-right"></i>お問い合わせ</li>
        </ul>
      </div>
    </div>
  </div>
</header>

CSS

/**
 * ヘッダーのラッパー
 */
div.header-wrapper {
  position: relative;
}

/**
 * ハンバーガーメニューのラッパー
 */
div.sp-nav-wrapper {
  /* PCサイトではハンバーガーメニューは表示しない */
  display: none;
}

/**
 * １０００pxより画面幅が小さい場合
 * （今回はわかりやすく1000pxにしています。）
 */
@media screen and (max-width: 1000px) {
  /**
   * ハンバーガーメニューのラッパー
   */
  div.sp-nav-wrapper {
    /* ハンバーガーメニューを表示する */
    display: block;
    width: 320px;
    /* 絶対配置 */
    position: absolute;
    top: 0;
    right: 0;
  }
}

/**
 * ナビゲーションメニューのボタンがクリックされたかを判別するためのチェックボックス
 */
.sp-nav-flg {
  /* 非表示 */
  display: none;
}

/**
 * ナビゲーションメニューのボタン
 */
.sp-nav-btn {
  display: block;
  width: 35px;
  height: 35px;
  /* 右寄せ */
  margin: 0 0 5px auto;
  border: 1px solid #333;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

/* 三本線を作る */
.sp-nav-btn span,
.sp-nav-btn:before,
.sp-nav-btn:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right: 0;
  width: 25px;
  height: 2.5px;
  margin: auto;
  background-color: #333;
}

/**
 * 真ん中の線
 */
.sp-nav-btn span {
  z-index: 2;
  overflow: hidden;
}

/**
 * 上の線
 */
.sp-nav-btn:before {
  content: "";
  z-index: 3;
  /* 上にずらす */
  transform: translate(0, -8px);
}

/**
 * 下の線
 */
.sp-nav-btn:after {
  content: "";
  z-index: 3;
  /* 下にずらす */
  transform: translate(0, 8px);
}

/**
 * 真ん中の線（クリック時）
 */
#sp-nav-flg:checked ~ .sp-nav-btn span {
  /* 非表示にする */
  opacity: 0;
}

/**
 * 上の線（クリック時）
 */
#sp-nav-flg:checked ~ .sp-nav-btn:before {
  /* 45度回転させる */
  transform: rotate(45deg);
}

/**
 * 下の線（クリック時）
 */
#sp-nav-flg:checked ~ .sp-nav-btn:after {
  /* -45度回転させる */
  transform: rotate(-45deg);
}

/* アニメーションをつける */
.sp-nav-btn:before,
.sp-nav-btn:after {
  transition: transform 300ms;
}

/**
 * メニュー
 */
.sp-nav-menu {
  /* 通常時は非表示 */
  display: none;
  background-color: rgba(0, 0, 0, .05);
}

/**
 * ナビゲーションボタンがクリックされた時のメニュー
 */
#sp-nav-flg:checked ~ .sp-nav-menu {
  /* ナビゲーションメニューのボタンがクリックされたら表示 */
  display: block;
}

/* メニューのリスト */
.sp-nav-outer ul {
  list-style: none;
  margin: 0;
  padding: 10px;
}

/* メニューのリスト(li) */
.sp-nav-outer ul li {
  padding: 10px;
  border-bottom: 1px solid #000;
}

/* メニューのリスト(li)先頭 */
.sp-nav-outer ul li:first-child {
  border-top: 1px solid #000;
}

/* メニューの先頭のアイコン（fontawesome） */
.sp-nav-outer ul li i {
  margin-right: 10px;
}

できるだけコメントを残していますのでそちらで詳細は確認をしてください。