CSSとJSのみでハンバーガーメニュー【Bootstrap・jQueryなし】

2023 11/02

2023年11月2日 2023年11月2日

こんにちはtakosanです。
フロントエンド関心強めのWordPressエンジニアとして働いています。

今回はBootstrapやjQueryを使わず、

HTMLとCSS、純粋なJavaScriptのみで実装するハンバーガーメニューの作り方を解説します。

完成品のサンプル

以下は実際に作成したハンバーガーメニューのサンプルです。

See the Pen js-hamburger by takosan (@Yukiwebcreate) on CodePen.

コード全体をコピペしてもらえればそのまま使えるので、

自分で自己流に修正できる人はそのまま使ってください。

コードの解説や、どのようにして作成するかを見たい人は続きを読んでください。

コードの解説

今回のコードは、

・PCの場合は横並びのメニュー
・スマホ表示（今回は767px以下）の時だけメニューがハンバーガーメニューに格納される
・ハンバーガーボタンを押すとメニューは右からスライドで出てくる

という仕様です。

それではHTML、CSS、JSのコードの重要ポイントを解説していきましょう。

まずはHTMLから

<header>
  <div class="logo">
    <img src="https://web-den.com/wp-content/uploads/2023/11/sample-logo.png" alt="サンプルロゴ" />
  </div>
  <nav>
    <ul class="navigation">
      <li><a href="#menu-a">メニューA</a></li>
      <li><a href="#menu-b">メニューB</a></li>
      <li><a href="#menu-c">メニューC</a></li>
    </ul>
    <button id="hamburger" aria-label="メニュー開閉">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </nav>
</header>

今回は<header>要素に全てを入れ込んであります。

ご自身のコードに持っていくときは適宜<div>タグなどに書き換えて使うなど調整してください。

重要な部分としてはul要素にメニューを格納して、button要素で開閉ボタンを設置しているということです。

また、空の<span>タグは、ハンバーガーメニューの「≡」みたいなマークをCSSで描画するためだけのタグですので、中身は必要ありません。

続いてCSSを見ていきましょう。

全体のCSSを貼ると長くなるので、全体は上記サンプルのCSSウィンドウをご覧ください。

ここでは、重要な部分の解説をしていきます。以下は重要な部分だけを抜き出したCSSです。

/* 重要部分のみ抽出したCSSです */

.navigation {
  /* メニュー項目の初期設定 */
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navigation li {
  margin-left: 20px;
}

.navigation a {
  text-decoration: none;
  color: #333;
}

#hamburger {
  /* ハンバーガーメニュー（開閉ボタン）の初期設定 */
  display: none; /* PCでは非表示のため */
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

#hamburger span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 3px;
}

@media (max-width: 767px) {

  .navigation {
    position: absolute; /* メニューの位置を変更するため */
    right: -100%; /* 画面外へさよなら */
    top: 80px; /* ヘッダーの高さに合わせて変更 */
    background-color: #f5f5f5;
    flex-direction: column;
    width: 100%;
    transition: 0.2s ease-in-out;
  }

  .navigation li {
    margin: 10px 0;
    text-align: center;
  }

  #hamburger {
    display: flex; /* none → 表示 */
  }

  .navigation.show {
    display: flex;
    right: 0; /* .showクラスがついた時だけ画面外のメニューを戻してくる */
  }
}

CSSではPCでのスタイリングを先に行っています。

.navigationは、ul要素でメニューを格納しているクラスでしたね。

PCでは横並びでヘッダー内に並ぶようにしています。

#hamburgerはハンバーガーメニューを表示するbutton要素ですので、PCではdisplay:noneで非表示で、

スマホ表示（今回は767px以下を対象）としたときに、display:flexで表示するようにしています。

.navigationに格納されたメニューリストは、

スマホ表示の時、メニューをright:-100%により画面外へ吹き飛ばしています。

#hamburgerボタンが押された時に、right:0で正規の位置へ戻ってくるという仕組みです。

このとき、表示/非表示のオンオフ判定をするため最後の.showクラスでスタイルを定義しています。

JavaScriptのコードを見ていきましょう。

// ハンバーガーメニューの開閉制御
const ham = document.querySelector("#hamburger");
const nav = document.querySelector(".navigation");
ham.addEventListener("click", function () {
  nav.classList.toggle("show");
});

// ハンバーガーメニューのボタンを押したら、showクラスがついたり消えたりする

JavaScriptのコードは簡単です。

ボタンのクリックに応じて、上記の.showというクラスをつけたり消したりしているだけです。

あえて補足を書くとすれば、JS内でスマホ表示かどうかの判定はしていません。

理由はそもそもボタンを押せる状況がスマホ表示の時にしかありえないようにCSSで制御しているからです。

解説としては以上になります。