コピペで使える汎用的なハンバーガーメニューを作る

皆さんはハンバーガメニュー、使ってますか?


おそらく見たことがない人はいないでしょう。

登場してからしばらく経ちますが、飽きられず使い続けられるメニューボタンの定番です。

このハンバーガーメニューの作り方を紹介します。

ますはHTML

   
<button class="toggleBtn">
 <span></span><span></span><span></span>
</button>

これは一般的なものですね。spanが3つのやつです。

JQuery

   
    var toggleBtn = $(".toggleBtn");
    toggleBtn.click(function(){
        $(this).toggleClass('active');
    });

クリックされると、.activeを追加します。

scss

CSSよりは見やすいと思うので今回はSCSSで紹介します。

   .toggleBtn{
        width: 90px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #f3f3f3;
        transition: all 0.3s;
        span{
            display: block;
            height: 5px;
            width: 40px;
            background: $pink;
            border-radius: 10px;
            transition: all 0.3s;
            &:first-child{
                transform: translateY(-8px);
            }
            &:last-child{
                transform: translateY(8px);
            }
        }
        &.active span{
            &:first-child{
                transform: translateY(100%) rotate(45deg);
            }
            &:nth-of-type(2){
                transform: translateX(-100%);
                opacity: 0;
            }
            &:last-child{
                transform: translateY(-100%) rotate(-45deg);
            }

        }
    }

今回はposition:absoluteは使わずにflexboxを使います。

justify-content: center;とalign-items: center; で上下左右の中央に配置。

spanを縦に並べてtransformで1本目と3本目を上下に動かしてます。

利点は、spanとspanの隙間を調整しやすいことです。

今回だったら8pxになってますが、これを Ctrl+d で一括で変更してしまえば、簡単に間隔を調整することができます。

また、クリックされたときにバツに代わるときの動きも今回の場合は共通なのでコピペで使えます。

さいごに

ほとんどの場合にそのまま使えるものができたと思います。

参考にしていただければ幸いです。