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

概要

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