@caramu

ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。（byライスの人）

動きとしては、クリックすると２個目の棒線が消え、1個目・３個目の線が斜めにアニメーションするようになっています。

SASS

@mixin anime {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
@mixin rotate($rotate : -10){
    -webkit-transform: rotate($rotate + deg);
    -moz-transform: rotate($rotate + deg);
    -o-transform: rotate($rotate + deg);
    -ms-transform: rotate($rotate + deg);
    transform: rotate($rotate + deg);
}

@mixin button {
	display:block;
	width:40px;
	height:40px;
	border:none;
	@include kadomaru(10px);
	background:$color5;
	@include abs-tr(25,15);
	
	span {
		display:block;
		height:3px;
		width:90%;
		margin:5px auto;
		background:$white;
		@include kadomaru(5px);
		@include anime;
		@include rotate(0);
	}
}
@mixin buttonclose {
	span:nth-child(2) {
		display:none;
	}
	span:nth-child(1) {
		@include anime;
		@include rotate(-45);
		position:relative;
		top:4px;
	}
	span:nth-child(3) {
		@include anime;
		@include rotate(45);
		position:relative;
		top:-4px;
	}
}


	button {
		display:block;
		@include button;
		
	}
	button.close {
		@include buttonclose;
	}

HTML

 <button><span></span><span></span><span></span></button>