目次 [ close ]
  1. はじめに
  2. 手順
    1. まとめ
  3. さいごに
    1. 次のステップ

はじめに

Webサイトをスマートフォン対応にするときによく使われる「ハンバーガーメニュー」。画面のスペースを節約しながら、ユーザーに快適なナビゲーションを提供できる便利な仕組みです。

「ハンバーガーメニューを実装したいけど、JavaScriptが難しそう…」と感じている方もいるかもしれません。そこで今回は、初心者でも簡単に実装できるように、jQueryを使ったハンバーガーメニューの作り方を解説します！

この記事を読むことで、以下のことが学べます

  • ハンバーガーメニューの基本構造（HTML・CSS）
  • jQueryを使って開閉の動きをつける方法
  • レスポンシブ対応のポイント

ゆうや

「難しそう…」と思っている方でも大丈夫！
コードを一つずつ丁寧に解説するので、一緒に作っていきましょう！

手順

まずは、今回作るハンバーガーメニューの完成形を見てみましょう！

See the Pen ハンバーガーメニュー by yuya o (@yuya-o) on CodePen.

完成系のイメージができたところで、実際にjQueryを使ってハンバーガーメニューを作っていきましょう！

コードを順番に解説していくので、初心者の方も安心してください
それでは、始めましょう！！

STEP1
jQueryでハンバーガーメニューのボタンを作成しよう

まずは、クリックできる「3本線のボタン」 を作成します。
このボタンは、後でメニューを開閉するための重要なパーツになります。

シンプルなHTMLとCSSで作成できるので、早速コードを見ていきましょう！

See the Pen ハンバーガーメニュー　sec01 by yuya o (@yuya-o) on CodePen.

解説
  • <div class="box"> → ハンバーガーボタン全体を囲むボックス
  • <span></span> ×3 → それぞれの横線（ハンバーガーメニューの線）
  • .box
    • 幅60px、高さ60pxのボタン領域を作成
    • position: fixed; で画面の右上 (top: 10px; right: 10px;) に固定
    • 背景色はグレー (background-color: gray;)
  • .box span
    • 3本の横線を作成（width: 40px; height: 2px; で細い長方形）
    • position: absolute; でbox内の特定の位置に配置
    • background-color: #fff; で白色の線にする
    • transition: 1s; でアニメーションの準備
  • .box span:nth-of-type(1), .box span:nth-of-type(2), .box span:nth-of-type(3)
    • 1本目をtop: 15px;、2本目をtop: 30px;、3本目をtop: 45px; に配置し、均等に並べる
STEP2
クリックで「×」に変化するアニメーションを追加！

ボタンを作成しただけでは、見た目はただの3本線のままです。
次に、クリックしたときに「×」に変化するアニメーション を追加しましょう！

このアニメーションを加えることで、ユーザーに「開いた・閉じた」の状態を直感的に伝える ことができます。

では、具体的な実装方法を見ていきましょう！

See the Pen ハンバーガーメニュー　sec02 by yuya o (@yuya-o) on CodePen.

解説
  • 上の線 → 45°回転し、中央に移動
  • 真ん中の線 → 消える
  • 下の線 → -45°回転し、中央に移動
  • .toggleClass() を使って、open クラスを付けたり外したり する
STEP3
jQueryでメニューの開閉処理を実装

前のステップでは、3本線のアイコンをクリックすると「×」に変化するアニメーション を実装しましたね！
ここでは、ボタンをクリックするとメニューがスライド表示されるようにする 実装を行います。

See the Pen ハンバーガーメニュー by yuya o (@yuya-o) on CodePen.

解説
  • .menu は 初期状態で translateX(100%) に設定し、画面の外に配置
  • .menu.open で translateX(0) に変更し、画面内に表示
  • pointer-events: none; を使って、メニューが隠れているときはクリックできないようにする
  • transition: 1s; で スムーズなスライドアニメーション を実現

これで ハンバーガーメニューの基本的な実装 は完了です！

まとめ

  • クリックでメニューが開閉できるシンプルな実装が完成！
  • スライドアニメーションを加えて、動きのあるメニューを実現！
  • pointer-events: none; を活用し、ユーザーの誤操作を防止！

さいごに

お疲れさまでした！
これで 「クリックでメニューを開閉できるハンバーガーメニュー」 の実装が完成しました！

今回のステップでは、

  • シンプルなHTMLとCSSでボタンを作成
  • クリックで「×」に変化するアニメーションを追加
  • メニューをスライド表示して開閉できるように実装

といった、ハンバーガーメニューの基本的な仕組み を学びました。

次のステップ

このハンバーガーメニューをさらにカスタマイズして、より実用的なデザイン にしてみましょう！
例えば、

  • メニュー外をクリックしたら閉じる処理を追加
  • 開閉時にフェードアニメーションを加えておしゃれに
  • メニューが開いたときに背景を暗くする

など、色々な改良が考えられます！

今回の実装をベースに、自分なりにカスタマイズしてみるのも良い練習 になります。
ぜひ挑戦してみてくださいね！