Edited at

ハンバーガーメニューの作り方


概要

初心者による、覚え書き。

ハンバーガーメニューをクリックすると、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の引数にはいらないのね・・・。