ハンバーガーメニューの作り方｜HTML・CSS・JavaScriptでスマホ対応ナビを簡単実装！

10

Views

HTML・CSS・JavaScriptで作るハンバーガーメニューの完成イメージ（スマホ対応ナビゲーションUI）

スマホサイトでよく見る「三本線アイコン」。それが、ハンバーガーメニューと呼ばれるナビゲーションメニューです。今回は、HTML・CSS・JavaScriptを使って、シンプルに作る方法を初心者向けに解説します。

基本となるHTML

まずは、メニューアイコンとメニューリストのHTML構造を用意します。

<header>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="nav-menu">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

CSSで見た目を整える

三本線の見た目と、メニューの非表示をCSSで調整します。

.hamburger {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
}
.nav-menu {
  display: none;
}
.nav-menu.active {
  display: block;
}

JavaScriptで開閉を制御

クリックイベントでクラスを付け替え、メニューを開閉します。

const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

レスポンシブ対応を加える

PC画面では常にメニューを表示し、スマホではハンバーガー形式に切り替えるようにしましょう。

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .nav-menu {
    display: block !important;
  }
}

応用：開閉にアニメーションをつける

CSSのtransitionを使えば、メニューがふわっと開くような演出もできます。

.nav-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-menu.active {
  max-height: 300px; /* 適切な高さに調整 */
}

初心者が気をつけたいポイント

  • class名のミスに注意：JavaScriptとHTMLで同じクラス名を使っているか確認
  • クリックが反応しないとき：scriptが正しく読み込まれているか、エラーがないか確認
  • スマホ表示確認：開閉動作やレイアウト崩れがないか実機でも確認しましょう

おわりに

ハンバーガーメニューはモバイル対応の基本機能。HTML・CSS・JavaScriptの基礎を組み合わせれば、簡単に作れるようになります。自分のサイトにあわせてアニメーションやデザインをカスタマイズするのも楽しいですよ！

次回は、CSSだけで作れる「JavaScript不要のハンバーガーメニュー」も紹介予定です。お楽しみに！

関連記事