[css + js]アニメーションするハンバーガーメニューの作り方

作例。

HTML

<button id="nav_btn"><span></span></button>

装飾のために<span>を入れておく。

ボタン用の要素はjsで動作させるから何を使っても良いんだけど、<a>で作るのはやめた。<button>でやっていくことにしてる。何かで読んで、たしか推奨されてたと思う。

中身が空っぽなのが気持ち悪かったらテキストを入れてもいいけど、装飾時に邪魔なんでtext-indentとかを使っ消しておくこと。

js(jQuery)

$(function(){
    $('button#nav_btn').on('click',function(){
        $(this).toggleClass('active');
    })
})

クリック時の動作はclass(.active)の付与で制御する。

実際にはメニュー部分の表示とかもやってくんだけど、今回はボタンの話なので割愛。

css

今回の肝。

button#nav_btn{
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    border: none;
    background: none;
    cursor: pointer;
}
button#nav_btn span{
    width: 28px;
    height: 2px;
    display: block;
    background: #111;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: background .2s;
}
button#nav_btn span::before,
button#nav_btn span::after{
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background: #111;
    position: absolute;
    left: 0;
    transition: top .2s, transform .2s;
}
button#nav_btn span::before{
    top: -8px;
}
button#nav_btn span::after{
    top: 8px;
}
button#nav_btn.active span{
    background: none;
}
button#nav_btn.active span::before,
button#nav_btn.active span::after{
    top: 0;
}
button#nav_btn.active span::before{
    transform: rotate(45deg);
}
button#nav_btn.active span::after{
    transform: rotate(-45deg);
}

spanとspanの::before、::afterで3本線を作る。クリックしたらspanを消して疑似要素を動かして「×」にする。

spanを消す際はopacityをいじると疑似要素ごと消えるんで注意。背景色を使ってるからそれを消す。

%指定や0になってるところはそのままで大丈夫、あとtransformの45degも。

サイズやら太さやらはpxで指定してるので、実際のデザインに合わせてそこを調整。太くしたいとか補足したいとかね。あと色とか。

コメント

タイトルとURLをコピーしました