Cacher is the code snippet organizer for pro developers

.icon-menu
	width 40px
	height 30px
	position: relative
	tr(all)
	cp()
	&:hover
		//transform rotate(360deg)
		.icon-menu__el
			&:nth-child(1)
				top 50%
				transform rotate(-45deg)
			&:nth-child(2)
				opacity 0
			&:nth-child(3)
				top 50%
				transform rotate(45deg)

.icon-menu--active
	transform rotate(0deg)
	&:hover
		transform rotate(90deg)
	.icon-menu__el
			&:nth-child(1)
				top 50%
				transform rotate(-45deg)
			&:nth-child(2)
				opacity 0
			&:nth-child(3)
				top 50%
				transform rotate(45deg)

.icon-menu__el
	height: 10%
	width: 100%
	background: black
	position: absolute
	tr(all)
	&:nth-child(1)
		top 0
		left: 0
	&:nth-child(2)
		opacity 1
		top 50%
		left: 0
	&:nth-child(3)
		top 100%
		left: 0

$('.icon-menu').click(function(){
  $(this).toggleClass('icon-menu--active');
});

.icon-menu
	.icon-menu__el
	.icon-menu__el
	.icon-menu__el