}3メニューの表示・非表示アニメーションCSSのtransformの指定を変えれば、いろんな登場のさせ方ができますね。今回のメニューは上からガラガラって降りてくるタイプです。function(){は「バーガーボタンがクリックされたら発動する」の部分。9行目、15行目の$('.dropdown').toggleClass('hide');は「dropdown」というクラスを持った要素に「hide」というクラスを付けたり、外したりします。ease-in;}が切り替わって、メニューが出たり隠れたりするっていう仕組みです。4バーガーボタンのアニメーション自分はこの部分のアニメーションが大好きで、サイトを見るとき真っ先に動きを確認したくなっちゃうんですよね。作り手の表に出ないこだわりが詰まってたりするので、斬新な動きしてるボタンを見るとテンション上がります。「そんな動きがあったかぁ〜」みたいなボタンに出会いたい。今回は3本線が一度中央に集まってから回転して「×」マークになる、という動きにしました。「中央に集まる」と「回転して×になる」の動きを2種類のCSSを用意して切り替えています。(もっといいやり方があるかも!)まず、jQuery。5、11、17行目でif文で判定を入れています。これはバーガーボタンがクリックされた時、今メニューが表示されているのか、隠れているのかを確認しています。〜}あまり美しくないんですけど、これはメニューを表示するときは「中央に集まる」→「回転して×になる」の順番、メニューを隠すときは「回転して平行線に戻る」→「中央から上下に別れる」の順番、という形でアニメーションの順番が逆になるので、場合分けしています。メニューを表示する場合は12〜16行目。translateY(-2vw);}3本線の上下の線が中央の線に集まって重なります。jQueryの13〜16行目のsetTimeout()は指定時間処理を待つ関数です。ここでは3本線が中央に集まるアニメーションが終わるのを待っています。続いて、14行目で「transform2」というクラスをつけて、CSSの69〜79行目にあるスタイルに切り替えています。0;)にしているのは、×を構成するのは線2本で足りるので、1本消しました。重ねて回転させても良かったかもしれないんですが、ブラウザによって微妙にズレて見切れたりしたら嫌だったので。ちなみに本体を透明にしちゃうと、3本まとめて透明になっちゃうので注意です(1回やりましたw)。カッコつけてちょっと多めに回転させていますが、回転量は必要に応じて。本体を回転させると、before、afterも影響を受けますので、反対方向に回転させるときはそれも考慮した回転量を設定します。回転軸もズレるのでafterには縦位置も調整入れています。アニメーションのスピード感はtransitionに指定している秒数で調整します。setTimeout()の時間も合わせて調整する必要があるので忘れずに!15行目については3で解説しています。jQueryの18〜21行目に書いてあるのは、バーガーボタン横の「MENU」という文言の操作です。メニューを表示させると「CLOSE」という文言に変わるようにしています。メニューを隠すときはこの逆の動きをしているだけですので、解説は割愛します。念のため、一連の動きをもう一度解説付きで載せておきます。},250);})5メニュー外の領域をクリック(タップ)したらメニューを閉じる細かいんですが、個人的にはサイトを見るときに絶対あって欲しいと思う機能です。モーダルウィンドウなんかでもそうですね。作る側としては面倒な機能だと思うんですけど、ぜひ入れて欲しいので、推しておきます。jQueryの25〜37行目がそれに当たります。25行目でページのどこかがクリックまたはタップされたことを拾っています。{26行目で「クリックまたはタップされた領域がメニュー以外の部分だったら」という条件が入っています。{あとの中身はバーガーボタンを押した時と基本は変わりません。違うのはtoggleClass()ではなく、addClass()、removeClass()を使っているという点です。この場合は「メニューを消す」という動作一択なので、「クラスがなければ追加、あれば削除」の動作をするtoggleClass()ではマッチしないことに注意が必要です。コメントをキャンセルメールアドレスが公開されることはありません。仕事や勉強、趣味などについて、とりとめのないことを書いていくブログです。閉じる%d人のブロガーが「いいね」をつけました。