概要

初心者による、覚え書き。
ハンバーガーメニューをクリックすると、Xマークにアニメーションするボタン。

ソースコード

HTML

<button class="btn-trigger">
	<span></span>
	<span></span>
	<span></span>
</button>

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

CSS

.btn-trigger {
	-webkit-appearance:none;
	appearance:none;
	position: fixed;/*要素を固定*/
	top: 24px;
	right: 12px;
	z-index: 110;
	width: 40px;
	height: 40px;
	border:none;
	background-color: #fff;	
	overflow : hidden;
	outline : none;
}

.btn-trigger span {
	position: absolute;/*fixedを起点に位置を指定*/
	display: block;
	width: 28px;
	height: 2px;
	background-color: #a0a0a0;
	transition: all 0.5s;
}

.btn-trigger span:first-of-type {
	top: 10px;
}
.btn-trigger span:nth-of-type(2) {
	top: 20px;
}
.btn-trigger span:last-of-type {
	bottom: 10px;
}
.btn-trigger.active span:first-of-type {
	transform: rotate(45deg);
	top: 20px;
}
.btn-trigger.active span:nth-of-type(2) {
	opacity:0;
}
.btn-trigger.active span:last-of-type {
	transform: rotate(-45deg);
	bottom: 20px;
}

JavaScript

$(".btn-trigger").on("click", function(){
	$(this).toggleClass("active");//.activeの追加/削除
});

クラス名を指定するときは「.」がいるけど、toggleClassの引数にはいらないのね・・・。