css ハンバーガーメニューのアイコン

Posted 2021-05-13

ハンバーガーメニューのアイコン
---------------


A [Pen](https://codepen.io/anonie/pen/jjpezO) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/jjpezO/license).

<div class="berger-menu-wrapper">
	<div class="berger-menu">
		<div class="berger-menu_item berger-menu_item01"></div>
		<div class="berger-menu_item berger-menu_item02"></div>
		<div class="berger-menu_item berger-menu_item03"></div>
	</div>
</div>

$(function() {
	$('.berger-menu-wrapper').click(function() {
		if($(this).find('.berger-menu').hasClass('is_active')){
			 $(this).find('.berger-menu').removeClass('is_active');
		} else {
			 $(this).find('.berger-menu').addClass('is_active');
		}
	});	
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

.berger-menu-wrapper {
	margin: 3rem;
	display: inline-block;
	position: relative;
	width: 30px;
}
.berger-menu-wrapper:hover {
	cursor: pointer;
}
.berger-menu {
	display: flex;
	flex-direction: column;
}
.berger-menu_item {
	transition: 0.2s;
	content: "";
	width: 100%;
	height: 5px;
	border-radius: 2.5px;
	margin-bottom: 5px;
	background: #333;
}
.berger-menu_item01 {
	top: 0;
}
.berger-menu_item02 {
	top: 5px;
}
.berger-menu_item03 {
	top: 10px;
	margin-bottom: 0;
}
.berger-menu.is_active .berger-menu_item01 {
	transform: translateY(10px) rotate(225deg);
	transition: 0.2s;
}
.berger-menu.is_active .berger-menu_item02 {
	opacity: 0;
}
.berger-menu.is_active .berger-menu_item03 {
/* 	transform: translateY(-12.5px) rotate(-45deg); */
	transform: translateY(-10px) rotate(-45deg);
	transition: 0.2s;
}