webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

ハンバーガーメニュー”閉じるボタン”をクリックで追加エフェクト【jQuery】

ハンバーガーメニューの閉じるボタンをクリックした時のエフェクト
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

こちらの記事で、基本のハンバーガーメニューを紹介しました。

このハンバーガーメニューは、クリックで形を「×」や「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してね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード ハンバーガーメニュー”閉じるボタン”をクリックで追加エフェクト【jQuery】

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)