ハンバーガーメニューの正体とJavaScriptの動作

ハンバーガーメニューは「画像」ではなく「状態の切り替え」です

スマホサイトの左上や右上にある三本線のボタン。
押すとメニューが横からスッと出てくる、あの「ハンバーガーメニュー」。

あれは特別なUI部品でも、ブラウザの標準機能でもありません。
正体はとてもシンプルで、HTMLの要素を表示・非表示にしているだけです。

つまり「新しい画面が出ている」のではなく、最初からページの中に存在していたメニューをJavaScriptが見せているだけです。

ここを理解すると、Webサイトの仕組みが一気に分かりやすくなります。

まず、ページを開いた瞬間に何が起きているか

スマホでページを開いた時、実はメニューはすでに読み込まれています。
ただし「画面外」に置かれているか、「非表示」にされているだけです。

つまり次のような構造です。

<button id="menuButton">☰</button>

<nav id="menu">
  <ul>
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

この段階でメニューは存在しています。
しかし、CSSによって見えない位置へ移動されています。

#menu {
  position: fixed;
  left: -260px;
  top: 0;
  width: 260px;
  height: 100%;
  background: white;
}

画面の左の外に置かれているため、ユーザーには見えません。
これが「閉じている状態」です。

ハンバーガーメニューを押した瞬間に起きていること

ボタンを押すと、JavaScriptが動きます。
特別な処理はしていません。やっていることは一つです。

「クラスを付ける」だけです。

const button = document.getElementById("menuButton");
const menu = document.getElementById("menu");

button.addEventListener("click", () => {
  menu.classList.toggle("open");
});

これだけです。
サーバー通信もページ遷移もしていません。

では、なぜメニューがスライドして出てくるのでしょうか。

実際に動いているのはCSS

JavaScriptは「開いた」という状態を付けただけです。
アニメーションをしているのはCSSです。

#menu.open {
  left: 0;
  transition: left 0.3s;
}

クラスが付くと、位置が「画面外 → 画面内」に変わります。
CSSのtransitionが、その変化をアニメーションとして見せています。

つまり役割はこう分かれています。

• HTML：メニューの中身
• CSS：動き・アニメーション
• JavaScript：ボタンを押したことの検知

これがJavaScriptの典型的な仕事です。

なぜページ遷移しないのか

初心者がよく不思議に思うのがここです。

> 画面が変わったのに、URLが変わっていない

それは「画面が変わっていない」からです。
見えている部分が変わっただけです。

Webページは「1枚の紙」ではありません。
実際には、多数の部品を重ねて作られています。

ハンバーガーメニューは、その上にパネルを被せているだけです。
アプリのように見えますが、やっていることはDOM操作です。

JavaScriptの重要な役割：イベント

ハンバーガーメニューの核心は「クリックイベント」です。

JavaScriptはユーザーの操作を監視しています。

• クリック
• スクロール
• キーボード入力
• タップ

これらが発生すると、処理が実行されます。
これをイベント駆動と呼びます。

ハンバーガーメニューは、JavaScriptのもっとも基本的な使い方の一例です。

実務でよくある失敗

ハンバーガーメニューは簡単に見えますが、トラブルが多い部分です。

スクロールできなくなる

メニューを開いたまま、背後のページがスクロールしてしまう問題が起きます。
対策として、bodyにスタイルを追加します。

document.body.classList.toggle("menu-open");

body.menu-open {
  overflow: hidden;
}

これを入れないと、スマホで操作感が悪くなります。

閉じられない問題

メニューの外側をタップしても閉じないサイトがあります。
これは「外側クリック」を検知していないためです。

UIとしては小さな違いですが、ユーザー体験に大きく影響します。

なぜスマホサイトで多用されるのか

理由は画面サイズです。
スマホではナビゲーションを常時表示できません。

そこで「必要なときだけ表示する」設計になります。
ハンバーガーメニューは、省スペースのための仕組みです。

ただし万能ではありません。
メニューが隠れるため、ユーザーが気付かないケースもあります。
実際、クリック率が下がるという調査もあります。

まとめ：ハンバーガーメニューはJavaScriptの入門教材

ハンバーガーメニューは難しい技術ではありません。
しかし、Webの仕組みが凝縮されています。

• DOM
• イベント
• クラス操作
• CSSアニメーション

すべてが関係しています。

「ボタンを押したら何かが起きる」
この単純な体験の裏側に、JavaScriptの基本が詰まっています。

ハンバーガーメニューを理解できたとき、
Webページは“画像の集まり”ではなく“動くプログラム”に見えてきます。