ハンバーガーボタンのアニメーションを実装する

スマートフォンサイトでハンバーガーボタンを実装することがたまにあるので、アニメーション付きで実装する方法をメモしておきます。

サンプルコード

HTML

<div id="nav-switch"></div>

CSS

.is-openの有無でスタイルを変更していて、表示の切り替えは:beforeと:afterで行います。

#nav-switch {
	/* ボタンの配置 */
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 15px;
	cursor: pointer;
}
/* バーのスタイル beforeが上部 afterが下部 */
#nav-switch:before,
#nav-switch:after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 1px;
	background: #000000;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
#nav-switch:before {
	top: 0;
	/* 真ん中のバーはbox-shadowで表示する */
	box-shadow: 0 6px 0 #000000;
}
#nav-switch:after {
	top: 12px;
}
/* ナビゲーションが開いている時の表示(×) */
#nav-switch.is-open:before {
	top: 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: none;
}
#nav-switch.is-open:after {
	top: 5px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

JavaScript

classの付け替えのみ行っています。

var navSwitch = document.getElementById('nav-switch');
navSwitch.addEventListener('click', navChange, false);

// .is-open を追加・除去する関数
function navChange() {
	// #nav-switchについているclassのリストを取得
	var classArr = navSwitch.classList;
	var navStatus = 'close';
	// .is-openがあるかを調べてる
	for(var i = 0; i < classArr.length; i++) {
		if(classArr[i] == 'is-open') {
			navStatus = 'open';
			break;
		}
	}
	if(navStatus == 'close') {
		navSwitch.classList.add('is-open');
	} else {
		navSwitch.classList.remove('is-open');
	}
}

ハンバーガーボタンのデモページ