<div class="container">
	<div class="ham" id="ham">
				<div class="ham_menu" id="ham_menu">
					<span class="ham_menu_item ham_menu_item-top" id="ham_menu_item-top"></span>
					<span class="ham_menu_item ham_menu_item-mid" id="ham_menu_item-mid"></span>
					<span class="ham_menu_item ham_menu_item-btm" id="ham_menu_item-btm"></span>
				</div>
			</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 100px;
	margin: 0 auto;
	padding: 50px 0;
	background: #fff;
}
.ham {
	position: relative;
	width: 100px;
	height: 100px;
	background: #fff;

	&:hover {
		cursor: pointer;
	}
}
.ham_menu {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 50px;
	margin: -25px 0 0 -30px;

	&_item {
		display: block;
		position: absolute;
		width: 60px;
		height: 10px;
		background: #008000;
		transition: .5s;
		transform-origin: center center;

		&-top {
			transform: translate(0px, 0px) rotate(0deg);
			&.is-active {
				transform: translate(0px, 20px) rotate(45deg);
			}
		}
		&-mid {
			transform: translate(0px, 20px);
			&.is-active {
				transform: translate(50px, 20px);
				background: transparent;
			}
		}
		&-btm {
			transform: translate(0px, 40px);
			&.is-active {
				transform: translate(0px, 20px) rotate(-45deg)
			}
		}
	}
}
(function() {
	'use strict';
	
	var ham,
			hamItems;

	ham = document.getElementById('ham');
	hamItems = document.querySelectorAll('.ham_menu_item');
	
	ham.addEventListener('click', function() {
		for (var i = 0; i < hamItems.length; i++) {
			if (hamItems[i].classList.contains('is-active')) {
				hamItems[i].classList.remove('is-active');
			} else {
				hamItems[i].classList.add('is-active');
			}
			// 上記if文を削除し、下記コードをアクティブにしても実行可能
			// hamItems[i].classList.toggle('is-active');
		}
	});
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.