ハンバーガーメニュー”閉じるボタン”をクリックで追加エフェクト【jQuery】
こちらの記事で、基本のハンバーガーメニューを紹介しました。
このハンバーガーメニューは、クリックで形を「×」や「CLOSE」に変えるものです。
今回は、「×」から3本線に戻る時に、アニメーションを挟みたい場合の書き方を紹介します。
例えば、こちらをクリックしてみてください。
これは、CSSのアニメーションを使っているのですが、「×」になった後、クリックするとすぐに元のハンバーガーメニューに戻ってしまいます。
CSSのアニメーションを使っているので、transitionが効かないのです。
できることなら、「×」のタイミングにもエフェクトを入れたいですよね。
jQueryで一定時間のみclassを付与することで、「x」をクリックしたタイミングで、アニメーションを入れることができます。
具体的に見てみましょう。
基本のハンバーガーメニューで紹介していたjQueryはこちらです。
$(function() {
$('.menu_btn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.global_menu').addClass('active');
} else {
$('.global_menu').removeClass('active'); /* ←※ */
}
});
});（2種類掲載していましたが、実際に使うとなるとこちらですね。）
”ハンバーガーメニューに「active」classがついている時にナビゲーションが開いていて、ハンバーガーメニューに「active」がついていない時には、ナビゲーションは閉じている”
という状況を作る為に、global_menuにも「active」というclassをつけ外ししています。
そこで、「×」をクリックするタイミング、つまり、”※”のタイミングで、menu_btnに、classを付与すると、期待するようなことができそうです。
でも、今度はずっとclassがついているという状態ではなく、アニメーションの為の一時的なclass付与が望ましいですよね。
そこで次のように書き加えます。
$(function() {
$('.menu_btn').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.global_menu').addClass('active');
} else {
$('.global_menu').removeClass('active');
/* ここから追加 */
$('.menu_btn').addClass('completed').delay(1000).queue(function(next){
$(this).removeClass('completed');
next();
});
/* ここまで追加 */
}
});
});delay・queueを使って1秒後にclassを外します。
これで、「×」をクリックした時に1秒間だけclassを付与することができます。
付与したclassを使ってアニメーションを入れてみます。
.menu_btn.completed span:nth-of-type(1) {
animation: completed-move-1 .75s forwards;
}
@keyframes completed-move-1 {
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(20px) rotate(0);
}
0% {
transform: translateY(20px) rotate(45deg);
top: -10px;
}
}
.menu_btn.completed span:nth-of-type(3) {
animation: completed-move-3 .75s forwards;
}
@keyframes completed-move-3 {
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-20px) rotate(0);
}
0% {
transform: translateY(-20px) rotate(-45deg);
bottom: -11px;
}
}「0」と「100」をとりあえず入れ替えただけのアニメーションですが、「x」から戻る時にもしっかりエフェクトを入れることができました。
少し凝ったハンバーガーメニューを作りたい場合は、このようにclassを付与してあげれば良いと思います。
いいなと思ったら
TAPしてね♡↓
基本のハンバーガーメニューエフェクトまとめ フォームのラジオボタンをCSSカスタムで可愛くする
コメントは承認後に表示されます。