はじめに

スマートフォンサイトでは定番となっているハンバーガーメニュー。「三本線をタップするとメニューが表示され、もう一度タップすると閉じる」というシンプルな機能ですが、実際にはJavaScriptとCSSが連携して動作しています。

初心者の方の中には、

ハンバーガーメニューはどうやって開閉しているの？
JavaScriptでは何をしているの？
CSSだけで作れないの？
×ボタンに変わる仕組みが知りたい

と思っている方も多いでしょう。

この記事では、実際に使用しているjQueryとSCSSのコードを例に、ハンバーガーメニューの動きを一つひとつ丁寧に解説します。

完成イメージ

今回解説するメニューには次のような機能があります。

ハンバーガーボタンをクリックするとメニューが開く
背景スクロールを停止する
ハンバーガーが×ボタンに変化する
オーバーレイをクリックすると閉じる
CSS Transitionで滑らかにアニメーションする

最近のWebサイトでは定番ともいえる実装です。

使用するjQuery

まずは今回使用するJavaScriptです。

$('#l-menu').on('click', function () {
　if($(this).attr("class")=="check"){
　　$(this).removeClass("check").addClass("checked");
　　$('body').addClass('overflow');
　　$('header').addClass('active');
　}else{
　　$(this).removeClass("checked").addClass("check");
　　$('body').removeClass('overflow');
　　$('header').removeClass('active');
　}
});
$('#l-overlay').on('click', function () {
　$('#l-menu').removeClass("checked").addClass("check");
　$('body').removeClass('overflow');
　$('header').removeClass('active');
});

コードだけを見ると少し長く感じますが、実際に行っていることはそれほど複雑ではありません。

まずはクリックイベント

最初はこちらです。

$('#l-menu').on('click', function () {

これは

idが「l-menu」の要素がクリックされたら処理を実行する

という意味です。

jQueryの

.on('click')

はクリックイベントを設定するための代表的な書き方です。

例えばボタンを押したら何かを表示する、画像を切り替える、モーダルを開くなど、多くの場面で使用されます。

今回の例では、ハンバーガーボタンがクリックされた瞬間にメニューの開閉処理が始まります。

現在の状態を判定している

次はこちらです。

if($(this).attr("class")=="check"){

ここがハンバーガーメニューの一番重要な部分です。

$(this)

は

「今クリックした要素」

を意味しています。

つまり

$(this).attr("class")

は

クリックした要素のclass名を取得する

という意味になります。

初期状態は

<div id="l-menu" class="check">

なので、

取得されるclassは

check

になります。

if文では

classがcheckなら

という条件になっています。

つまり、

まだメニューが閉じている状態

ということです。

classを書き換えている理由

条件が一致するとこちらが実行されます。

$(this).removeClass("check").addClass("checked");

ここでは

check

を削除し、

checked

を追加しています。

つまり

check
↓
checked

へ状態を変更しています。

JavaScriptはメニューを表示しているわけではありません。

「状態を変更しているだけ」です。

ここを理解するとJavaScriptとCSSの役割が分かりやすくなります。

CSSが見た目を変更している

JavaScriptで

checked

が付くと、

SCSS側では

&.checked

のスタイルが適用されます。

つまり

JavaScriptは

checkedを付ける

CSSは

checkedが付いたら見た目を変える

という役割分担になっています。

この考え方はWeb制作では非常に重要です。

JavaScriptにデザインを書かず、

CSSに見た目だけを書いておくことで保守性が高くなります。

bodyにclassを付ける理由

続いてこちらです。

$('body').addClass('overflow');

これはbodyタグへ

overflow

というclassを追加しています。

CSSでは例えば

body.overflow{
　overflow:hidden;
}

としていることが多いです。

これによって、

メニューを開いている間は

ページ全体がスクロールしなくなります。

もしこの処理が無いと、

メニューを開いたまま背景がスクロールしてしまいます。

スマートフォンでは非常に操作しづらくなるため、

現在ではほぼ必須の処理と言えるでしょう。

headerへactiveを追加する理由

続いて

$('header').addClass('active');

です。

これも表示・非表示を切り替えるためです。

例えばCSSでは

header nav{
　right:-100%;
}
header.active nav{
　right:0;
}

のようになっていることが多いです。

通常は画面外へ隠しておき、

activeが付いた瞬間に

画面内へスライド表示されます。

JavaScriptでは

「表示する」

のではなく、

activeという状態を付けているだけ

という点がポイントです。

閉じる処理

メニューが開いている状態では

classは

checked

になっています。

そのためelse文が実行されます。

$(this).removeClass("checked").addClass("check");
$('body').removeClass('overflow');
$('header').removeClass('active');

追加したclassを元に戻しています。

これだけで

ボタンが元に戻る
メニューが閉じる
スクロールできるようになる

という3つの処理が同時に行われます。

オーバーレイをクリックした場合

最近のWebサイトでは、

メニューの外側をクリックすると閉じる仕様が一般的です。

その処理がこちらです。

$('#l-overlay').on('click', function () {

オーバーレイとは、

メニュー表示時に背景を暗くする要素です。

ここをクリックすると

removeClass()

が実行され、

メニューを閉じます。

ユーザーは閉じるボタンを探す必要がなくなるため、

使いやすいUIになります。

ハンバーガーが×になる仕組み

CSSを見ると

通常状態では

span:nth-of-type(1)

が上線、

span:nth-of-type(2)

が下線になっています。

つまり

────
────

という状態です。

しかし

&.checked span

になると

transform:rotate(45deg);

と

transform:rotate(-45deg);

になります。

さらに

両方とも

top:29px;

へ移動しています。

つまり

────
────

↓

＼
／

という状態になります。

この2本の線が交差することで、

自然な×ボタンが完成します。

transitionがアニメーションを作っている

CSSには

transition:.4s ease-in-out;

があります。

これが無い場合は

────
────

↓

×

と一瞬で切り替わります。

transitionを書くことで

0.4秒かけて回転しながら変化します。

動きが自然になり、

見た目もぐっと良くなります。

JavaScriptとCSSを分けるメリット

初心者のうちは

「JavaScriptだけで全部できるのでは？」

と思いがちですが、

実務では

JavaScript・・・状態を管理する
CSS・・・デザインを管理する

という役割分担が基本です。

例えば色を変えたい場合でも、

JavaScriptを書き換える必要はありません。

CSSだけ修正すれば済みます。

このように責任を分離することで、

コードが読みやすくなり、保守もしやすくなります。

まとめ

今回紹介したハンバーガーメニューでは、JavaScriptは「クラスを付け替える」ことに専念し、実際の表示やアニメーションはCSSが担当しています。このように役割を分けることで、コードの見通しが良くなり、デザイン変更や機能追加にも柔軟に対応できます。

記事内で登場したポイントを振り返ると、まず「click」イベントでハンバーガーボタンが押されたことを検知し、「check」と「checked」のクラスを切り替えて開閉状態を管理しています。さらに、「body」へクラスを追加して背景スクロールを停止し、「header」へ「active」クラスを付与することでメニューを表示しています。また、オーバーレイをクリックした際にも同じようにクラスを元へ戻すことで、ユーザーが直感的にメニューを閉じられる設計になっています。

CSS側では、「transform: rotate()」を利用して2本の線を回転・移動させ、ハンバーガーアイコンから×ボタンへ自然に変形させています。そして「transition」を組み合わせることで、滑らかなアニメーションを実現しています。

このような『JavaScriptで状態を切り替え、CSSで見た目を制御する』という考え方は、ハンバーガーメニューだけでなく、アコーディオン、モーダルウィンドウ、タブ切り替えなど、多くのUI実装に共通する基本テクニックです。仕組みを理解しておくことで、さまざまな場面に応用できるようになるでしょう。

前の記事へ

次の記事へ

Markupflow｜Web制作と実装のメモ

jQueryでハンバーガーメニューを実装する方法｜クリック時の動きを徹底解説