jQuery

【jQuery】アニメーションを使用してメニューを表示Burguer Menu with Animation

June 21, 2018
Burguer-menu-with-animation

Burguer Menu with Animationはハンバーガートリガーをクリックするとアニメーションを使用してメニューを表示させます。

HTML

	<div class="menu-trigger">
	  <span class="line line-1"></span>
	  <span class="line line-2"></span>
	  <span class="line line-3"></span>
	</div>
	<div class="aside"></div>

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(".menu-trigger").click(function () {
	    if($(".menu-trigger").hasClass("active"))
	    {        
	        $(".menu-trigger").removeClass("active");
	        $(".aside").removeClass("active");
	    }
	    else
	    {
	        $(".menu-trigger").addClass("active");
	        $(".aside").addClass("active");
	    }
	});
</script>

MIT