【CSS + jQuery】ハンバーガーボタンの作り方

2024.05.22

URLをコピーしました！

ハンバーガーボタンの作り方がわからない
ハンバーガーボタンの線が崩れる
retina対応のハンバーガーボタンを作りたい

このような悩みに答えます。

多くのwebサイトに実装されているハンバーガーメニュー。

メニューを表示するための3本線のボタンですが、実はとても簡単に実装することができます。

この記事では、そんなハンバーガーボタンの作り方を、初心者の方にもわかりやすく解説していきます。
さらに、高解像度のディスプレイにも対応するretina対応のポイントもお伝えします。

この記事を読めば、コピペで使いまわせるハンバーガーボタンが作れるようになります。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

【結論】実装デモ

時間のない方の為に、私が実際に使用しているハンバーガーボタンのデモを紹介します。

See the Pen 【jQuery】ハンバーガーメニュー by すずき (@k-suzuki3533) on CodePen.

普段は3本線のボタンですが、タップするとX印に変わっているかと思います。
retina対応していますので、どの解像度でもデザインが崩れることなく表示されます。

今回はボタンにフォーカスを当てて解説しています。
ハンバーガーメニュー全体の作り方は以下の記事で解説しています。

具体的な実装方法

以下の3ステップで作成していきます。

HTMLを書く
js（jQuery）を書く
CSSを書く

順に解説していきます。

HTMLを書く

まずはHTMLを書いていきます。

ボタンの枠と、中の線3本文の<span>を書くだけなので簡単ですね。
具体的なコードは以下です。

<buttom class="drawer_btn" type="button">
  <span></span>
  <span></span>
  <span></span>
</buttom>

ボタンの枠ですが、私は<button>タグを使うようにしています。

理由は、デフォルトでフォーカスが可能だからです。
tabキーで操作しているユーザーにも使いやすいサイトになります。

また、スクリーンリーダーやその他の支援技術によって「ボタン」として認識されるため、障がいを持つユーザーにとっても使いやすくなります。

ただ、本来はformの送信機能で使われるタグなので、type="button"属性を指定しデフォルトの動作を変更しています。

js（jQuery）を書く

次にjQueryでクリック時にclassを付与します。

$(document).ready(function () {
  $(".drawer_btn").click(function () {
    $(this).toggleClass("js-active");
  });
});

このコードにより、.drawer_btnを持つ要素がクリックされるたびに、その要素にjs-activeクラスの着脱を行っています。

jQueryを使用する際はCDNを忘れずに読み込むようにしましょう。

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

jQuery CDN

ちなみに素のJavaScriptで実装する場合は以下のコードになります。

document.addEventListener("DOMContentLoaded", function() {
  var drawerBtns = document.querySelectorAll(".drawer_btn");
  for (var i = 0; i < drawerBtns.length; i++) {
    drawerBtns[i].addEventListener("click", function() {
      this.classList.toggle("js-active");
    });
  }
});

CSSを書く

最後に開閉時それぞれのデザインを書いていきます。
基本のスタイルは以下になります。

.drawer_btn {
  position: relative;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999;
}
.drawer_btn > span:not([class]) {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2px;
  background-color: black;
}

<button>タグはデフォルトで背景色と枠線がありますので、background-color: transparent;、border: none;を指定します。

Tabキーでフォーカスが当たった時に表示される青い枠線（outline）は様々な意見がありますが、私は残しています。
消してしまうと、フォーカスが当たっていることが伝わらないからです。

あまりにデザインに合わないのであれば、消すのではなく別途調整する方法が良いかと思います。

次に線のデザインを調整します。

/* 基本のデザイン */
.drawer__button > span:not([class]):nth-of-type(1) {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}
.drawer__button > span:not([class]):nth-of-type(2) {
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.drawer__button > span:not([class]):nth-of-type(3) {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}
/* 展開時のデザイン */
.drawer__button.js-active > span:not([class]):nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__button.js-active > span:not([class]):nth-of-type(2) {
  opacity: 0;
}
.drawer__button.js-active > span:not([class]):nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(45deg);
}

基本のデザインと、.js-active付与時のデザインをそれぞれ書いて完成です。

retina対応にし、汎用性を高めました。

ボタンの線ですが、retina対応にし、どの大きさでも崩れることなく表示されるようにしています。

具体的には、デフォルトの位置を全て<button>の中央に配置しています。
1つ目と3つ目の線については、そこからcalc()を使用し上下にずらしています。

単位を全てremで指定し、解像度によってレスポンシブに動作するようにしています。

/* 基本のデザイン */
.drawer__button > span:not([class]):nth-of-type(1) {
  transform: translate(-50%, calc(-50% - 0.5rem));
}
.drawer__button > span:not([class]):nth-of-type(2) {
  transform: translate(-50%, -50%);
}
.drawer__button > span:not([class]):nth-of-type(3) {
  transform: translate(-50%, calc(-50% + 0.5rem));
}

展開時も同様です。
中央を基準とし、そこから動かしています。

.drawer__button.js-active > span:not([class]):nth-of-type(1) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer__button.js-active > span:not([class]):nth-of-type(2) {
  opacity: 0;
}
.drawer__button.js-active > span:not([class]):nth-of-type(3) {
  transform: translate(-50%, -50%) rotate(45deg);
}

これでどのような仕様の案件でもコピペで使い回すことができます。

実際、私は全てこのコードを使用し、案件に対応しています。
（各要素の大きさや色は適宜変更しています。）

retina対応についての詳しい解説は、後日改めてアップします。

calc() – CSS: カスケーディングスタイルシート | MDN

おわりに

ハンバーガーボタンの作り方を、初心者向けにわかりやすく解説していました。

私が実装の際、気をつけているポイントは以下です。

<button>タグを使い、ユーザーフレンドリーにする
全てremで指定し、retina対応する
ボタンの中央を基準に配置し、デザインが崩れないようにする

何かの参考になれば幸いです。
是非、試して見て下さい。

URLをコピーしました！