3行でできるjQuery製ハンバーガーメニュー

今回は、スマホ版サイトではおなじみのハンバーガーメニューをjQueryをつかって3行で実現する方法をご紹介します。この方法を使ったハンバーガーメニューでは、HTMLはデータ、CSSは見た目、javascriptは状態遷移と言語ごとに役割を明確に分担しています。昨今のVueやReactなどにみられるコンポーネント指向にも通ずる考え方なので、ぜひ最後まで目をとおしていってください。

ハンバーガーメニューの完成DEMO

こちらがハンバーガーメニューのデモになります。ボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。ポピュラーなスマホサイトではよくでてくるUIになります。

jQueryのソースコード

jqueryの実装内容を解説

まずは、HTMLやCSSは無視してjQueryのコードのみご覧ください。

$('.menu-btn').on('click', function(){
    $('.menu').toggleClass('is-active');
});

上記コードが、ハンバーガーメニューとして実際に使用しているコードになります。jqueryのonメソッドを使用しています。「.menu-btn」の要素が「click」された時に指定した関数を実行する、という意味です。指定した関数の中身をみてみると、toggleClassメソッドで「.menu」に「is-active」というクラスが付いていなければ外す、付いていなれば付けてあげる、という処理が実装されています。

javascriptでは状態の切り替えのみ行う

jQueryで行うのはクラスの付け替えのみ

今回のプログラムでは、メニューボタン(.menu-btn)をクリックしたらメニュークラス(.menu)に任意のクラス(.is-active)の付け替えを行う、という処理しかjqueryには記述していません。クラスの付け替えのみでメニューの閉じ開きを実現しています。この付け替えするクラス「is-active」はメニューがアクティブな状態(開いている)とそうでない状態(閉じている)を表現するためのクラスになっています。

CSSではメニューの状態を表現する

さて、.menuにis-activeというクラスが付け替えられているわけですが、ここでCSSをみてみましょう。以下の部分がクラスの付け替えによって書き換えられるスタイル部分です。

.menu{
  transform: translateX(100vw);
  transition: transform .3s linear;
}
.menu.is-active{
  transform: translateX(0);
}

transitionでは、transformプロパティの値が変わった時にそれらを0.3秒間かけて一定のスピード(linear)でアニメーションさせる、といった内容になっています。

transformでは、is-activeクラスが付いていないときは画面幅(100vw)分だけ右にずれています。メニューが閉じている時の位置になります。is-activeクラスがついているときはtranslateX(0)として右にずれた分を元に戻しています。これがメニューが開いている時の位置になります。

この二つのプロパティの組み合わせによってハンバーガーメニューがアニメーションしながら閉じ開きをするのをクラスの付け替えだけで表現しているのです。

まとめ

役割を分担することでjavascriptの記述量を大幅に減らす

今回のような記述をすることでハンバーガーメニューの実装が3行になったように、javascriptの記述量を大幅に減らすことができます。タブメニューやアコーディオンメニュー、プルダウンメニュー、ありとあらゆる動きを伴うUIパーツはこのようなクラスの付け替えのみで再現できるのです。

VueやReactのコンポーネントでも同じです

ユーザーのアクション(イベント)によってコンポーネントの状態を切り替える。コンポーネントの状態が変わることで見た目も変わる。この考え方は昨今のjavascriptフレームワークで用いるコンポーネント指向と同じです。ぜひ、活用していってください。

この記事をかいてみての感想

http://eclair.company/media/wp-content/uploads/sites/2/2019/11/seta-1.jpg
Yuto Seta

javascriptやjQueryに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントから教えてください!

▼感想
コピペで済ませようと思ったらコピペ以上の深い設計の世界にいざなわれてしまった。みたいな、記事が本当は書きたかった。笑

▼書き足したい内容、記事のメモ
・タブメニューを4行で実装
・スライドショーをライブラリなしで実装する
・アコーディオンメニューを数行で実装
・ポップアップ、モーダルを

2 COMMENTS

Yuto Seta Yuto Seta

display:none;を使わずとも画面外にメニューを移動させて待機させておいて、
クリックしたと同時に画面内に現れるようにすることで実現できます。

今回でいうと、
transform: translateX(100vw);
とすることで画面外にメニューが隠れています。
100vwは画面の横幅の大きさを表しています。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です