🐥

ハンバーガーメニューの実装解説

に公開
HTML
tech

ハンバーガーメニューの実装解説

概要

このドキュメントでは、BBB英会話スクールのランディングページに実装したハンバーガーメニューの仕組みを解説します。

実装の全体像

ハンバーガーメニューは以下の3つの要素で構成されています：

  1. HTML - メニューの構造
  2. CSS - デザインとアニメーション
  3. JavaScript (jQuery) - クリック時の動作

1. HTML構造

<div class="btn-trigger" id="btn01">
  <span></span>
  <span></span>
  <span></span>
</div>

ポイント

  • .btn-trigger クラスで全体を囲む
  • #btn01 IDで特定のボタンを識別
  • 3つの<span>要素がハンバーガーメニューの3本線になる

2. CSS（スタイリング）

基本スタイル

.btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  cursor: pointer;
}
  • position: relative - 内部の絶対配置の基準点
  • width: 50px height: 44px - ボタンのサイズ
  • cursor: pointer - マウスカーソルを指の形に変更

3本の線のスタイル

.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ff3f3f;
  border-radius: 4px;
}
  • position: absolute - 親要素を基準に配置
  • height: 4px - 線の太さ
  • background-color: #ff3f3f - 赤色の線
  • border-radius: 4px - 角を丸くする

アニメーション設定

.btn-trigger,
.btn-trigger span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}
  • transition: all 0.5s - すべての変化を0.5秒かけてアニメーション

3本の線の位置

.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}
  • 1本目: 上端
  • 2本目: 中央（上から20px）
  • 3本目: 下端

クリック後のX字アニメーション

#btn01.active span:nth-of-type(1) {
  transform: translateY(20px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity: 0;
}
#btn01.active span:nth-of-type(3) {
  transform: translateY(-20px) rotate(45deg);
}

動作の仕組み:

  1. 1本目の線: 下に20px移動 → 反時計回りに45度回転
  2. 2本目の線: 透明化（消える）
  3. 3本目の線: 上に20px移動 → 時計回りに45度回転

結果的に「三」→「×」に変化します。

3. JavaScript（jQuery）

$(function () {
  $(".btn-trigger").on("click", function () {
    $(this).toggleClass("active");
    return false;
  });
});

コードの解説

$(function () { ... });

  • ページの読み込みが完了してから実行される
  • DOM（HTMLの要素）が準備できてから処理を開始

$(".btn-trigger").on("click", function () { ... })

  • .btn-triggerクラスの要素がクリックされた時に実行
  • on("click") でクリックイベントを監視

$(this).toggleClass("active");

  • toggleClass: クラスのON/OFFを切り替える
    • activeクラスがない → 追加
    • activeクラスがある → 削除
  • これによりCSSの.activeスタイルが適用/解除される

return false;

  • デフォルトの動作をキャンセル
  • イベントの伝播を停止

動作の流れ

  1. 初期状態: 3本の線が横に並んでいる（ハンバーガー）
  2. クリック: JavaScriptがactiveクラスを追加
  3. アニメーション: CSSのtransitionで0.5秒かけて変形
    • 1本目と3本目が中央で交差
    • 2本目が消える
  4. X字完成: メニューが開いた状態を表現
  5. 再クリック: activeクラスが削除され、元のハンバーガーに戻る

応用のヒント

色を変更する

background-color: #ff3f3f; /* お好みの色に変更 */

アニメーション速度を変更する

transition: all 0.5s; /* 秒数を変更（例: 0.3s, 1s） */

サイズを変更する

.btn-trigger {
  width: 60px;  /* 幅を変更 */
  height: 50px; /* 高さを変更 */
}

まとめ

このハンバーガーメニューは以下の技術を組み合わせて実装されています：

  • HTML: シンプルな構造（3つのspan要素）
  • CSS: position、transform、transitionを駆使したアニメーション
  • jQuery: クラスの切り替えによる状態管理

シンプルながら視覚的にわかりやすいUIコンポーネントです。

Discussion