JavaScriptで作るシンプルでスムーズなハンバーガーメニューの実装方法

モバイルファーストのデザインが主流となる中で、ハンバーガーメニューは必須の要素の一つです。この記事では、シンプルでスムーズなハンバーガーメニューの実装方法をステップバイステップで解説します。

HTMLの構造を準備する

まず、HTMLでメニューボタンと、表示・非表示を切り替えるナビゲーションの部分を作成します。

<!-- ハンバーガーメニューボタン -->
<button id="menu-button">☰</button>

<!-- モバイル用のナビゲーションメニュー（初期状態では非表示） -->
<nav id="mobile-menu" class="hidden">
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">アバウト</a></li>
    <li><a href="#contact">コンタクト</a></li>
  </ul>
</nav>

CSSでスタイリングとアニメーションを設定

次に、CSSを使用して、ナビゲーションが最初は非表示になり、ボタンがクリックされたときにスムーズにスライドして表示されるようにします。

/* メニューが非表示の時のスタイル */
.hidden {
  max-height: 0;  /* メニューの高さを0にして非表示にする */
}

/* ハンバーガーメニューボタンのスタイル */
#menu-button {
  font-size: 24px;
  cursor: pointer;  /* クリック可能なカーソルを表示 */
}

/* モバイル用のナビゲーションメニューのスタイル */
#mobile-menu {
  max-height: 200px;  /* メニューが開いた時の最大の高さ */
  overflow: hidden;  /* 高さ外のコンテンツを隠す */
  transition: max-height 0.3s ease;  /* 高さの変化を滑らかにする */
}

max-heightの値は、メニューが開いたときの内容に合わせて調整が必要です。

JavaScriptでメニューの開閉を制御

最後に、JavaScriptを使って、メニューボタンがクリックされたときに、ナビゲーションの表示・非表示を切り替える処理を記述します。

// HTMLが完全に読み込まれた後に実行
document.addEventListener("DOMContentLoaded", function() {
  // メニューボタンの要素を取得
  const button = document.getElementById("menu-button");
  
  // ナビゲーションメニューの要素を取得
  const menu = document.getElementById("mobile-menu");

  // メニューボタンがクリックされたときのイベントリスナーを設定
  button.addEventListener("click", function() {
    // 'hidden'クラスをトグルで切り替えて、メニューの表示・非表示を制御
    menu.classList.toggle("hidden");
  });
});

まとめ

これで、シンプルでスムーズに動作するハンバーガーメニューの実装が完了です。この実装は基本的なものなので、デザインや動作をさらにカスタマイズして、自分のサイトに合った素敵なハンバーガーメニューを実現しましょう！