ハンバーガーメニューとは

ハンバーガーメニューとはWebサイトやアプリでよく見かける三本線のボタンを指します。

ハンバーガーメニューをクリックするとメニューが表示されるのが一般的な使い方です。

PC版Webサイトの場合、画面が大きいのでナビゲーションメニューを全て表示させることもできますが、タブレット版やスマートフォン版Webサイトの場合、小さい画面の中にナビゲーションメニューを表示する余裕がありません。なので、ナビゲーションメニューは画面の外に配置して、ハンバーガーメニューをクリックすると表示するようにするわけです。

jQueryを使ったハンバーガーメニュー

今回はアクセシビリティを考慮してbuttonタグを使用して作成しています。

HTML

<!-- ハンバーガー（3本線）メニュー -->
<button class="menu">
  <!-- 1本目 -->
  <span class="menu-line"></span>
  <!-- 2本目 -->
  <span class="menu-line"></span>
  <!-- 3本目 -->
  <span class="menu-line"></span>
</button>

<!-- メニュー画面 -->
<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="" class="nav-link">Top</a></li>
    <li class="nav-item"><a href="" class="nav-link">Consept</a></li>
    <li class="nav-item"><a href="" class="nav-link">About</a></li>
    <li class="nav-item"><a href="" class="nav-link">Aceess</a></li>
    <li class="nav-item"><a href="" class="nav-link">Contact</a></li>
  </ul>
</nav>

<!-- 以下は</body>の直前に設置 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  <!-- ここにJavaScriptの内容を設置 -->
</script>

CSS

/* メニューボタン【通常時】 */
.menu{
  /* 画面に固定 */
  position: fixed;
  /* 上から10px */
  top: 10px;
  /* 右から10px */
  right: 10px;
  /* 重なり順（優先順位）を変更 */
  /* 数値が大きいほど優先順位が高い */
  z-index: 3;
  /* 横幅 */
  width: 50px;
  /* 高さ */
  height: 50px;
  /* 背景色 */
  background-color: rgba(102, 102, 102, 0.5);
  /* 正円 */
  border-radius: 50%;
  /* ボタンの罫線を削除 */
  border: none;
  /* 余白込み */
  box-sizing: border-box;
}
/* マウスオーバーした場合 */
.menu:hover{
  /* マウスオーバーした時のアイコンを変更 */
  cursor: pointer;
  /* 背景色を変更 */
  background-color: rgba(102, 102, 102, 1);
}
/* フォーカス（タブ移動）した場合 */
.menu:focus{
  /* 背景色を変更 */
  background-color: rgba(102, 102, 102, 1);
  /* 罫線を削除 */
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 3本線の基本設定 */
.menu-line{
  /* spanはinlineが初期値なのでblockに変更 */
  display: block;
  /* それぞれの位置を設定するためにabsoluteに変更 */
  position: absolute;
  /* 右から12px */
  right: 12px;
  /* 線の横幅 */
  width: 25px;
  /* 線の高さ */
  height: 2px;
  /* 線の色（背景色で設定） */
  background-color: #FFF;
  /* 四つ角の丸み */
  border-radius: 4px;
  /* 0.5秒で変化 */
  transition: all .5s;
}
/* 1本目の線 */
.menu-line:nth-child(1){
  /* 上から17px */
  top: 17px;
}
/* 2本目の線 */
.menu-line:nth-child(2){
  /* 上から25px */
  top: 25px;
}
/* 3本目の線 */
.menu-line:nth-child(3){
  /* 上から33px */
  top: 33px;
}

/* メニューボタン【クリック時】 */
/* 1本目の線 */
.active .menu-line:nth-child(1){
  /* 8px下にズラし-45度傾ける */
  transform: translateY(8px) rotate(-45deg);
}
/* 2本目の線 */
.active .menu-line:nth-child(2){
  /* 透明化して見えなくする */
  opacity: 0;
}
/* 3本目の線 */
.active .menu-line:nth-child(3){
  /* 8px上にズラし45度傾ける */
  transform: translateY(-8px) rotate(45deg);
}

/* メニュー画面【通常時】 */
.nav{
  /* 画面を固定 */
  position: fixed;
  /* 上にくっつける */
  top: 0;
  /* 横幅の分だけ画面の外にズラす */
  left: -200px;
  /* 重なり順（優先順位）を変更 */
  z-index: 2;
  /* 横幅 */
  width: 200px;
  /* 高さ */
  height: 100vh;
  /* 背景色 */
  background: #666;
  /* 0.5秒で変化 */
  transition: all .5s;
}
.nav-list{
  /* ul/liのマーカーを削除 */
  list-style: none;
}
.nav-link{
  /* リンクの文字色 */
  color: #FFF;
  /* リンクの下線を削除 */
  text-decoration: none;
}
.nav-link:hover{
  /* リンクがマウスオーバーした時に文字の透明度が70％に変化 */
  opacity: .7;
}
/* メニュー画面【クリック時】 */
.nav.active {
  /* ズラしていた分を戻して画面に表示させる */
  left: 0;
}

JavaScript

$(function(){
  //メニューボタンをクリックしたら
  $(".menu").click(function(){
    //「.menu」に「.active」を追加・削除
    $(this).toggleClass("active");
    //「.nav」に「.active」を追加・削除
    $(".nav").toggleClass("active");
  });
  //メニュー内のリンクをクリックしたら
  $(".nav-link").click(function(){
    //「.menu」から「.active」を削除
    $(".menu").removeClass("active");
    //「.nev」から「.active」を削除
    $(".nav").removeClass("active");
  });
});

実装

See the Pen hamburger-menu1 by DREAM NET WORKS (@dnw) on CodePen.