ハンバーガーメニューをjQueryで簡単に実装しよう！プラグインは使わずにカスタマイズ性の高いハンバーガーメニュー！！

2022.04.05

悩んでいる人

ハンバーガーメニューを作りたいけどどうやって作るんだろう？

本記事では、上記の悩みを解決します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

Web制作を行っていると必ず出くわすハンバーガーメニュー。

jQueryだけでなく、CSSも微妙に記述がややこしく学習初期の頃は仕組みが分からず苦労したのを覚えています。

CSSだけでも実装できたり、Drawer.jsというプラグインを使って実装できたりと色々な方法がありますが、本記事では、jQueryを用いてハンバーガーメニューの実装方法について解説します。

フェイドインで現れるドロワーメニュー

See the Pen 【jQuery】ドロワーメニュー by TakahiroOkada (@okalog) on CodePen.

HTML

<header class="l-header">
  <div class="l-header__inner u-inner">
    <h1 class="l-header__logo">ロゴ</h1>
　　 //PC用メニュー
    <ul class="l-header__list">
      <li class="l-header__item"><a href="/" class="l-header__link">TOP</a></li>
      <li class="l-header__item"><a href="/about.html" class="l-header__link">ABOUT</a></li>
    </ul>
    //ハンバーガーボタン
    <button class="l-header__hamburger c-hamburger" id="js-hamburger">
      <span></span>
      <span></span>
      <span></span>
    </button>
    //スマホ用ドロワーメニュー
    <div class="c-drawer" id="js-drawer">
      <ul class="c-drawer__list">
        <li class="c-drawer__item"><a href="/" class="c-drawer__link">TOP</a></li>
        <li class="c-drawer__item"><a href="/about.html" class="c-drawer__link">ABOUT</a></li>
      </ul>
    </div>
  </div>
</header>

PC用とスマホ用でメニューの変えています。これは正直どっちがいいのかわからないですが個人的にはスマホ用は別で準備したほうがスタイリングがしやすいという経験からこのような実装にしております。

CSS

.l-header__hamburger{
  height: 100%;
  width: 50px;
  z-index: 100;
}
.c-hamburger{
  border: none;
  background-color: transparent;
  z-index: 101;
}
.c-hamburger span{
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: #efeeea;
  position: relative;
  transition: ease .3s;
  display: block;
}
.c-hamburger span:nth-child(1){
  top:0;
}
.c-hamburger span:nth-child(2){
  margin: 8px 0;
}
.c-hamburger span:nth-child(3){
  top:0
}
/* クリック時のハンバーガーメニューのスタイリング */
.c-hamburger.is-checked span{
  background-color: #1c273e;
}
.c-hamburger.is-checked span:nth-child(1){
  top:5px;
  transform: rotate(45deg);
}
.c-hamburger.is-checked span:nth-child(2){
  opacity: 0;
}
.c-hamburger.is-checked span:nth-child(3){
  top: -16px;
  transform: rotate(-45deg);
}
.c-drawer{
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #efeeea;
  top:0;
  left: 0;
  z-index: 100;
}
.c-drawer.is-checked{
  display: block;
}
.c-drawer__list{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-drawer__list{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.c-drawer__link{
  display: inline-block;
  margin: 50px 0;
  font-size: 30px;
  text-decoration: none;
  color: #1c273e;
  text-align: center;
}
@media screen and (min-width: 767px) {
  .l-header__list{
    display: flex;
    list-style: none;
    height: inherit;
    margin: 0;
  }
  .c-hamburger{
    display: none;
  }
  .c-drawer{
    display: none;
  }
}

部分的に見ていくと、下記の部分でハンバーガーのスタイリングを行っています。

.is-checkedがついたときというのは、jQueryのイベントでハンバーガーメニューをクリックしたときに.is-chekcedクラスを付与したときのスタイリングになります。このときに、ハンバーガーメニューからバツマーク（閉じる）に変わるようにしています。

.c-hamburger{
  border: none;
  background-color: transparent;
  z-index: 101;
}
.c-hamburger span{
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: #efeeea;
  position: relative;
  transition: ease .3s;
  display: block;
}
.c-hamburger span:nth-child(1){
  top:0;
}
.c-hamburger span:nth-child(2){
  margin: 8px 0;
}
.c-hamburger span:nth-child(3){
  top:0
}
/* クリック時のハンバーガーメニューのスタイリング */
.c-hamburger.is-checked span{
  background-color: #1c273e;
}
.c-hamburger.is-checked span:nth-child(1){
  top:5px;
  transform: rotate(45deg);
}
.c-hamburger.is-checked span:nth-child(2){
  opacity: 0;
}
.c-hamburger.is-checked span:nth-child(3){
  top: -16px;
  transform: rotate(-45deg);
}

jQuery

$(function(){
  const hamburger = $('#js-hamburger');
  const drawer = $('#js-drawer');
  hamburger.on('click',function(){
    hamburger.toggleClass("is-checked")
    drawer.toggleClass("is-checked")
  })
})

変数でハンバーガーメニューとドロワーメニューを定義しています。

あとは、ハンバーガーメニューをクリックしたときにtoggleClassメソッドでクラスのつけはずしを行っています。