【初〜中級者向け】バーガーメニューの自作り方

最近フロントばっかりやっているので、すっかりフロント脳になってます。
たまにサーバサイドやるとポンコツになっているのがよく分かりますね。

 

さて、以前プラグインを使ったバーガーメニューの実装について記事を書いたんですが、今回はHTML(PHP)+CSS+jQueryを使って、バーガーメニューを自作する方法について書いてみようと思います。

自作できるとデザインや動きのカスタマイズの幅が一気に拡がりますし、意外と簡単にできるので、備忘録的に残しておこうと思います。

WordPress専用って部分はほとんどないので、色々と使い回せると思います。

 

今回作るのはこんな感じ↓↓のバーガーメニューです。
サイズ感や色などにはあまり言及しないで進めていきます。

 

ちょっと長いですが、まずはスクリプトのサンプルから。

 

HTML(PHP)

 

CSS

jQuery

 

 

ポイントと言えるのは、5つくらいでしょうか。

 

①WordPressに登録したメニューを呼び出して描画
HTMLの12〜21行目の部分です。
wp_nav_menu()という関数を使って、mainという名前のメニューを呼び出しています。

だいたい想像つくかもしれませんが、引数の意味はこんな感じです。

 

②3本線メニューの正体
2つ目はCSSの36〜59行目の部分。
バーガーメニューではおなじみの3本線は本体、before、afterの3つを使って表現しています。
初めて知った時には「こんな作り方してたんだ…」って軽い衝撃でした。

 

③メニューの表示・非表示アニメーション
CSSのtransformの指定を変えれば、いろんな登場のさせ方ができますね。
今回のメニューは上からガラガラって降りてくるタイプです。

jQuery4行目の

は「バーガーボタンがクリックされたら発動する」の部分。

 

9行目、15行目の

は「dropdown」というクラスを持った要素に「hide」というクラスを付けたり、外したりします。

 

これによって、バーガーボタンをクリックする度に
「hide」がない状態(CSSの110〜117行目)

「hide」がある状態(124〜127行目)

が切り替わって、メニューが出たり隠れたりするっていう仕組みです。

 

④バーガーボタンのアニメーション
自分はこの部分のアニメーションが大好きで、サイトを見るとき真っ先に動きを確認したくなっちゃうんですよね。作り手の表に出ないこだわりが詰まってたりするので、斬新な動きしてるボタンを見るとテンション上がります。
「そんな動きがあったかぁ〜」みたいなボタンに出会いたい。

 

それはさておき、

今回は3本線が一度中央に集まってから回転して「×」マークになる、という動きにしました。
「中央に集まる」と「回転して×になる」の動きを2種類のCSSを用意して切り替えています。
(もっといいやり方があるかも!)

 

まず、jQuery。
5、11、17行目でif文で判定を入れています。
これはバーガーボタンがクリックされた時、今メニューが表示されているのか、隠れているのかを確認しています。

あまり美しくないんですけど、これはメニューを表示するときは「中央に集まる」→「回転して×になる」の順番、メニューを隠すときは「回転して平行線に戻る」→「中央から上下に別れる」の順番、という形でアニメーションの順番が逆になるので、場合分けしています。

 

メニューを表示する場合は12〜16行目。

12行目で「transform」というクラスをつけることで、CSSの61〜67行目にあるスタイルに切り替わり、

3本線の上下の線が中央の線に集まって重なります。

jQueryの13〜16行目のsetTimeout()は指定時間処理を待つ関数です。
ここでは3本線が中央に集まるアニメーションが終わるのを待っています。

 

続いて、14行目で「transform2」というクラスをつけて、CSSの69〜79行目にあるスタイルに切り替えています。

「before」(3本線の一番上)を透明(opacity: 0;)にしているのは、×を構成するのは線2本で足りるので、1本消しました。
重ねて回転させても良かったかもしれないんですが、ブラウザによって微妙にズレて見切れたりしたら嫌だったので。
ちなみに本体を透明にしちゃうと、3本まとめて透明になっちゃうので注意です(1回やりましたw)。

 

カッコつけてちょっと多めに回転させていますが、回転量は必要に応じて。
本体を回転させると、before、afterも影響を受けますので、反対方向に回転させるときはそれも考慮した回転量を設定します。
回転軸もズレるのでafterには縦位置も調整入れています。

 

アニメーションのスピード感はtransitionに指定している秒数で調整します。
setTimeout()の時間も合わせて調整する必要があるので忘れずに!

15行目については③で解説しています。

 

jQueryの18〜21行目に書いてあるのは、バーガーボタン横の「MENU」という文言の操作です。
メニューを表示させると「CLOSE」という文言に変わるようにしています。

メニューを隠すときはこの逆の動きをしているだけですので、解説は割愛します。

 

念のため、一連の動きをもう一度解説付きで載せておきます。

 

 

⑤メニュー外の領域をクリック(タップ)したらメニューを閉じる
細かいんですが、個人的にはサイトを見るときに絶対あって欲しいと思う機能です。
モーダルウィンドウなんかでもそうですね。
作る側としては面倒な機能だと思うんですけど、ぜひ入れて欲しいので、推しておきます。

 

jQueryの25〜37行目がそれに当たります。

25行目でページのどこかがクリックまたはタップされたことを拾っています。

26行目で「クリックまたはタップされた領域がメニュー以外の部分だったら」という条件が入っています。

あとの中身はバーガーボタンを押した時と基本は変わりません。
違うのはtoggleClass()ではなく、addClass()、removeClass()を使っているという点です。

この場合は「メニューを消す」という動作一択なので、「クラスがなければ追加、あれば削除」の動作をするtoggleClass()ではマッチしないことに注意が必要です。

 

バーガーメニューはカスタマイズの宝庫なので、色々試してみると面白いと思います!

シェアする

コメントを残す

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

CAPTCHA


コメントする