JavaScriptで作るレスポンシブなドロワーメニュー（ハンバーガーメニュー）

本記事では、HTML、CSS、JavaScriptを組み合わせて、デスクトップとモバイルの両方に対応するレスポンシブなドロワーメニューの作り方を解説します。
ハンバーガーメニューを使って、モバイル表示時にナビゲーションを簡潔に表示し、ユーザーエクスペリエンスを向上させる方法を、具体的なコード例とともに詳しく説明します。
この記事を通じて、初心者の方でも自分のサイトに取り入れやすい、シンプルで使いやすいナビゲーションメニューを実装できるようになります。

1. HTMLの構造
2. CSSでのスタイリングとレイアウト
3. JavaScriptでの動的な動作制御
4. 追加の機能とアクセシビリティへの配慮
5. まとめ
6. 参考リンク

1. HTMLの構造

レスポンシブなドロワーメニューの基礎は、正しいHTML構造の構築にあります。
ヘッダー内にロゴ、ナビゲーションメニュー、そしてハンバーガーボタンを配置します。以下のコード例は、基本的なHTML構造を示しています。


<header class="header">
  <div class="logo"><a href="https://kamechannel.com/">KaMeChannel</a></div>
  <nav class="nav">
    <ul class="nav-list">
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事一覧</a></li>
      <li><a href="#">お問い合わせ</a></li>
      <li><a href="#">プロフィール</a></li>
    </ul>
  </nav>
  <button class="hamburger" aria-label="メニュー">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>
</header>

2. CSSでのスタイリングとレイアウト

CSSでは、レスポンシブデザインのためにメディアクエリを利用して、画面幅に応じたスタイルの切り替えを行います。
以下は、デスクトップではナビゲーションメニューが常に表示され、モバイルではハンバーガーメニューをクリックしたときにのみ表示されるレイアウトの例です。


/* ヘッダーの基本スタイル */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  position: relative;
}

/* ロゴのスタイル */
.logo a {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

/* ナビゲーションメニュー */
.nav-list {
  display: flex;
  list-style: none;
}
.nav-list li {
  margin-left: 1rem;
}
.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}
.nav-list li a:hover {
  background-color: #555;
  border-radius: 5px;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: #fff;
}

/* モバイル用スタイル */
@media (max-width: 768px) {
  nav.nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  nav.nav.active {
    display: block;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #333;
  }
  .nav-list {
    flex-direction: column;
    align-items: center;
  }
  .nav-list li {
    margin: 1rem 0;
  }
}

3. JavaScriptでの動的な動作制御

JavaScriptを使って、ハンバーガーメニューのクリックでナビゲーションメニューを表示・非表示に切り替える動作を実装します。
以下のコードは、ページロード時にハンバーガーボタンにイベントリスナーを登録し、ボタンがクリックされたときにナビゲーションメニューのクラスをトグル（切り替え）するものです。


document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('nav.nav');
  
  hamburger.addEventListener('click', function() {
    nav.classList.toggle('active');
  });
});

4. 追加の機能とアクセシビリティへの配慮

このナビゲーションメニューは、以下の点も考慮して設計されています：
– アクセシビリティ: ハンバーガーメニューにはaria-labelを設定し、スクリーンリーダーでの利用に配慮しています。
– ユーザー体験: ホバー効果やスムーズなトランジションを取り入れ、直感的な操作を実現しています。
– パフォーマンス: メディアクエリを使い、モバイル表示時に不要なメニューを非表示にすることで、レンダリングの負荷を軽減しています。
これらの点を踏まえて、実際のWebサイトに組み込むことで、ユーザーにとって使いやすいナビゲーションメニューを提供できます。

5. まとめ

本記事では、HTML/CSSとJavaScriptを活用して、レスポンシブなドロワーメニュー（ハンバーガーメニュー）の作成方法を詳しく解説しました。
基本的なHTML構造から始まり、CSSによるスタイリング、そしてJavaScriptを使った動的な動作制御まで、初心者にも分かりやすい形で解説しました。
これにより、デスクトップでは常に表示され、モバイルではハンバーガーメニューをクリックすることで表示される、レスポンシブなナビゲーションメニューが実現できます。
アクセシビリティやパフォーマンスにも配慮した設計となっており、実際のWebサイトに応用することでユーザーエクスペリエンスを大幅に向上させることができます。
ぜひ、今回の基本をもとに自分なりのカスタマイズや機能拡張にチャレンジしてみてください！