ハンバーガーメニューは「開けば完成」ではない｜JavaScriptで考える状態管理

スマートフォン向けのWebサイトでは、三本線のアイコンを押すとナビゲーションが開く「ハンバーガーメニュー」がよく使われます。

一見すると、クリック時にメニューを表示し、もう一度クリックしたら閉じるだけの簡単な機能に見えるかもしれません。

しかし実務では、「一度は開くが閉じられない」「画面を回転すると操作できなくなる」「メニューを閉じても背景をスクロールできない」といった不具合が起こりやすい部分です。

こうした問題を防ぐには、見た目を切り替えるだけでなく、メニューが現在どの状態なのかを整理して管理する必要があります。

今回は、ハンバーガーメニューを安定して実装するための状態管理と、公開前に確認したいポイントを解説します。

メニューには「開いている」と「閉じている」がある

ハンバーガーメニューには、少なくとも次の二つの状態があります。

メニューが閉じている

メニューが開いている

閉じているときはナビゲーションを隠し、開いているときは表示します。

さらに、メニューアイコンをバツ印へ変える、背景を暗くする、ページのスクロールを止めるといった処理も、同じ状態に合わせて切り替えます。

重要なのは、それぞれを別々に操作しないことです。

メニューは開いているのにアイコンは三本線のまま、背景は暗いのにナビゲーションは閉じている、といった食い違いが起きると、利用者は現在の状態を判断できません。

一つの状態を基準に、関連する表示や動作をまとめて変更することが基本です。

JavaScriptは状態を切り替える役割を持つ

ハンバーガーメニューでは、JavaScriptですべての見た目を直接指定する方法があります。

しかし、文字色、位置、透明度、アニメーションなどをJavaScript側で個別に変更すると、処理が複雑になりやすくなります。

実務では、JavaScriptは「開いている状態へ変更する」「閉じている状態へ戻す」という合図を担当し、実際の見た目はCSSで管理すると整理しやすくなります。

役割を分けると、次のようになります。

HTMLはメニューとボタンの構造を作る

CSSは開閉時の見た目を定義する

JavaScriptは操作に応じて状態を切り替える

この分け方なら、デザインを変更するときは主にCSSを修正し、動作を変更するときはJavaScriptを確認できます。

担当する範囲が明確になり、後からの修正もしやすくなります。

開閉ボタン自身にも状態を持たせる

画面を見れば、メニューが開いているかどうかを確認できます。

一方、読み上げ機能などを利用している場合は、見た目だけでは状態が伝わりません。

開閉ボタンには、現在メニューが展開されているかを示す情報を持たせることが大切です。

メニューを開いたら「展開中」、閉じたら「閉じている」という状態へ更新します。

また、そのボタンがどのメニューを操作するのかも関連付けておくと、支援技術が構造を理解しやすくなります。

アイコンの形を変えるだけでなく、HTML上の情報も実際の状態と一致させることが重要です。

メニューを閉じる方法は複数用意する

開閉ボタンをもう一度押さなければ閉じられないメニューは、利用者にとって不便な場合があります。

特に画面全体を覆うメニューでは、次のような方法でも閉じられるようにすると操作しやすくなります。

開閉ボタンを再度押す

メニュー内のリンクを選択する

メニュー外の暗い背景を押す

キーボードのEscapeキーを押す

ただし、閉じる処理を場所ごとに別々に作ると、ある方法で閉じたときだけスクロール停止が解除されない、といった問題が発生しやすくなります。

どの操作から呼び出されても、同じ閉じる処理が実行される構成にすると安全です。

背景のスクロールにも注意する

メニューが画面全体を覆っていても、その後ろにあるページがスクロールできてしまうことがあります。

メニューを操作しているつもりで画面を動かすと、閉じたあとにページの位置が大きく変わっているため、利用者が現在地を見失う原因になります。

そのため、メニューを開いている間は背景のスクロールを止める方法がよく使われます。

ただし、閉じたときには必ず元の状態へ戻さなければなりません。

スクロール停止だけが残ると、メニューを閉じたあともページを動かせなくなります。

さらに、スクロール位置がページ上部へ移動してしまう実装もあるため、開く前の位置を保てるか確認する必要があります。

画面幅が変わったときに状態をリセットする

パソコンでは通常の横並びメニューを表示し、スマートフォンではハンバーガーメニューへ切り替えるサイトがあります。

このとき注意したいのが、メニューを開いたまま画面幅を変更する操作です。

たとえば、スマートフォン用メニューを開いた状態で画面を広げると、パソコン表示になっても次の状態が残ることがあります。

バツ印のアイコンが残る

背景が暗いままになる

ページをスクロールできない

スマートフォン用のメニューが重なって表示される

ブラウザの幅を手動で変える場面だけでなく、タブレットを回転させたときにも同じ問題が起こります。

表示形式が切り替わる画面幅を超えたときは、スマートフォン用の開閉状態を解除し、通常の状態へ戻すことが大切です。

アニメーション終了後の状態まで確認する

メニューを滑らかに表示するために、移動や透明度のアニメーションを使うことがあります。

しかし、見えなくなっただけで、メニュー自体が画面上に残っている場合があります。

透明なメニューがリンクやボタンの上に重なっていると、下にある要素をクリックできません。

反対に、閉じた瞬間に完全に非表示にすると、閉じるアニメーションが再生されない場合があります。

ハンバーガーメニューでは、次の点を分けて考える必要があります。

画面に見えているか

操作できる状態か

ページ上の領域を占有しているか

アニメーション中か

支援技術から認識される状態か

見た目が消えたことだけで完成と判断せず、閉じたあとに背後のリンクを操作できるかも確認します。

連続クリックで不具合が起きないようにする

利用者は、必ずしもゆっくり一回ずつボタンを押すとは限りません。

開閉ボタンを素早く連打すると、アニメーションの途中で状態が何度も切り替わり、表示と内部状態が一致しなくなる場合があります。

また、同じクリック処理が重複して登録されていると、一回押しただけで開く処理と閉じる処理が連続して実行されることもあります。

結果として、ボタンを押しても何も起きていないように見えます。

処理を初期化するタイミングが複数ないか、同じボタンへ何度も同じ処理を登録していないかを確認することが重要です。

アニメーション中の操作をどう扱うかも、実装時に決めておきます。

複数のメニューを一括で操作しない

同じページに、ヘッダー用メニュー、カテゴリー用メニュー、検索パネルなど、複数の開閉機能が存在することがあります。

対象を大まかに指定していると、一つのボタンを押しただけで複数のメニューが同時に開く可能性があります。

それぞれのボタンと操作対象を正しく関連付け、押されたボタンに対応するメニューだけを切り替える必要があります。

同じデザインの部品を複数配置しても動作するか確認すると、対象の指定ミスを見つけやすくなります。

一つだけ配置したテストでは正常でも、実際のページで複数使用すると不具合が表面化することがあります。

JavaScriptが動かない場合も考える

JavaScriptの読み込みに失敗すると、開閉処理は実行されません。

このとき、重要なページへのリンクが完全に利用できなくなる構成は避けたいところです。

メニューのリンク自体はHTMLに用意し、JavaScriptは表示方法を切り替えるために使うと、構造を保ちやすくなります。

また、JavaScriptの実行前にメニューが一瞬表示されてから消える現象が起きる場合もあります。

最初の表示状態をHTMLとCSSで適切に決め、JavaScriptが利用可能になったあとで開閉機能を有効にすると、ちらつきや操作不能を減らせます。

キーボードでも操作を確認する

マウスやタッチ操作だけでなく、キーボードでも利用できるか確認します。

開閉ボタンへ移動できるか、EnterキーやSpaceキーで操作できるか、メニュー内のリンクへ順番に移動できるかを確認します。

画面全体を覆うメニューでは、メニューを開いているのにキーボード操作だけが背後のページへ移動してしまうことがあります。

反対に、メニューを閉じたあとも非表示のリンクへ移動できる状態も問題です。

閉じたときには、操作位置を開閉ボタンへ戻すと、利用者が次に何を操作すればよいか分かりやすくなります。

公開前に確認したい項目

ハンバーガーメニューを実装したら、次の項目を確認します。

一回目の操作で開くか

もう一度押すと閉じるか

アイコンとメニューの状態が一致しているか

メニュー外を押して閉じられるか

Escapeキーで閉じられるか

メニュー内のリンクを選ぶと適切に移動できるか

開いている間の背景スクロールは意図どおりか

閉じたあとにページをスクロールできるか

画面幅を変更しても状態が残らないか

端末を回転しても表示が崩れないか

ボタンを連続して押しても動作が乱れないか

キーボードだけで操作できるか

閉じたメニューが背後の要素を邪魔していないか

複数の開閉部品が互いに影響しないか

一つの端末で開閉できたことだけでなく、閉じたあとの状態や別の操作方法まで確認することが大切です。

まとめ

ハンバーガーメニューは、クリックで表示を切り替えるだけの機能ではありません。

メニュー本体、開閉ボタン、アイコン、背景、スクロール、キーボード操作など、複数の要素を同じ状態に合わせる必要があります。

JavaScriptは開閉状態の切り替えを担当し、見た目はCSS、構造や意味はHTMLで管理すると整理しやすくなります。

また、ボタン以外から閉じる操作、画面幅の変更、連続クリック、背景スクロールなども忘れずに確認します。

「開いたから完成」ではなく、「どの方法で操作しても正しく開き、確実に元へ戻れるか」まで確認する。

この視点を持つことで、使いやすく、不具合の起きにくいハンバーガーメニューを実装できるようになります。