【徹底解説】5歳でも分かる、ハンバーガーメニューの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はヘッダーのメニューとして良く使われるハンバーガーメニューの作り方を徹底的に解説していきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClass/toggleClassを用いた方法で実装します。

作るものの確認

今回作るのは、このように右上のボタンを押すと開閉するメニューです。メニュー開閉の方法は様々ありますが、今回は横にスライドしながら開閉します。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
│   └── styles
│       ├── destyle.css
│       └── style.css
└── sample.html

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。またsample.htmlはメニューから遷移する用に一応用意しているだけのものなので、中身は適当で大丈夫です。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

ヘッダーとコンテンツ部分

それでは見た目から作りましょう。ヘッダーとコンテンツ部分を用意していきます。

メニュー部分

次にメニューボタンとメニューの中身を作ります。

メニューの中身から配置していきます。ヘッダータグ内に配置します。

実際は、メニューは初期では見えない状態になります。見えないようにする方法は様々ありますが、今回は画面外に移動させる方法を用いましょう。

X方向(横方向)に横幅分(100%)ずらすため、transformプロパティとtranslateXというキーワードを用います。translateXの値にはpxなどの他の単位を使うこともできます。

次はボタン。こちらもヘッダータグ内に配置します。

これである程度見た目ができました。

動きをつける

最初に述べた通り、jQueryによるクラスの付け替えによって実現します。

まずは付け替えるスタイルです。先ほどメニューを見えないようにtransformプロパティで画面外に移動させましたが、それを打ち消すようなcssを用意します。

このクラスを、ボタンを押すたびに付けたり外したりします。

さて、いよいよjQueryでクラスの付け替えをしていきます。まずはjQueryを読み込みます。

scriptタグはbodyの一番下に書いてください。そして、その次の行にクラス付け替えのコードを実装します。

.Buttonが押された時に、.Menuに.Menu-isOpenというクラスが付いたり外れたりします。それによってメニューの位置がtranslateXの値によって移動し、開閉を表現します。

これで最低限の動きを作ることができました。

ここまでのコードは以下です。

index.html
style.css

見た目や動きを細かく作り込んでいく

ここから様々な箇所を作り込んでいきます。開閉時のアニメーションを追加したり、メニューが開いている時は余白部分をグレーで透過させたり、実際のサイトでもよく見られる形にレベルアップさせましょう。

開閉時のアニメーションをつける

開閉時のアニメーションは、transitionというプロパティで実現します。アニメーションをさせたい要素のスタイルに付与します。

このように、アニメーションで変化させたいプロパティとアニメーションにかかる時間を設定します。allと指定すればすべてのプロパティがアニメーションを伴って変化しますが、今回はtransformプロパティのみが.Menu-isOpenクラスの付け外しによって変化します。

これによってメニューがスライドしながら開閉します。

余白部分をグレーで透過させる

次に、メニューの外側の部分の改善です。HTMLにグレーのエリアを追加し、それにスタイルを当てましょう。クラスは付け外し用のものも用意しておきます。

display: none; ではなくvisibility: hidden; で非表示にします。これは、display: none; ではアニメーションが効かず、visibility: hidden; ではアニメーションが有効だからです。

続いてスクリプトです。.Overlayのクラスを付け替えることに加えて、グレー部分をクリックしてもメニューが閉じるようにしておきます。

これで余白部分がグレー透過になりました。

ボタンをアニメーションさせる

次にボタンのアニメーションです。今回ボタンは3本の線で表現していますが、上下の線を回転+移動させ真ん中の線は透明にすることでアニメーションを実現します。

まずは3本線のそれぞれにアニメーションのためにtransitionプロパティを追加します。

そして後ろに__isOpenがついているのが付け替え用のクラスです。上下の線はそれぞれ45度回転(rotate)させ、かつ真ん中でクロスするように縦方向の位置を調整(translateY)しています。

真ん中の線はシンプルに透明度を0にします。

そしてこれらをスクリプトで操作します。

これでボタンがアニメーションするようになりました。

背景のスクロールを止める

最後に、メニューが開いているときはスクロールできないようにしていきます。メニューが開いている時はスクロールを禁止し、メニューが閉じたら再度スクロールができるようになる必要があります。

そこでスクロールをして良いかを判定する変数を用意し、それを使って分岐を行います。fixedScroll関数でスクロールを固定に、releaseScroll関数で固定されたスクロールを解放します。

では、スクロールをどう固定するかです。

実はbodyタグにposition: fixedをつけるだけでスクロールができなくなります。メニューを開く時にそれが起こるようにしましょう。

ただ、これだけではコンテンツエリアのスタイルが崩れてしまうので、cssファイルに以下を追記しておきます。最上部に追記しましょう。

そして、メニューが閉じるときは今のと逆のことを行います。

これでスクロールの制御ができました。

しかし、これだけでは問題があります。ページを下部にいくらかスクロールした状態でメニューを開くとページ最上部にスクロールが戻ってしまいます。

そこで、すでにスクロールしていた高さ分、bodyを上にずらしましょう。topプロパティに負の値を指定すれば要素は上方向に移動します。

こうするとメニューを開いてもスクロール位置は変わりません。しかし、メニューを閉じるときにまたトップに戻ってしまうのでもうひと手間加えます。

このように、最初にずらした分だけ再度スクロールをさせてあげることでメニューを閉じた時にスクロール位置が変わらず元のコンテンツを閲覧できます。

ずらした高さはstyleから取得していますが、文字列かつ負の符号が付いています。そこで数値に変換(parseInt関数)してから符号を反転させています。

これでハンバーガーメニューが完璧な状態になりました!

まとめ

というわけでハンバーガーメニューの作り方をなるべく細かく説明しました。こうやって見ると結構やることが多かったですね。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、タブメニューの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください