お洒落に×印に変わるハンバーガーメニュー

この記事では、お洒落に×印に変わってくれる、ハンバーガーメニューのコードについて解説しています。カスタマイズしやすいようにSassを使って書いています。この記事を読んで、自分でコードを書いてみたり使用してみてください。

以下に詳しく解説していきます。

HTML
Sass
jQuery
まとめ

HTML

今回使用するHTMLを以下に書いておきます。

<div class="hamburger">
   <span class="hamburger__span--top"></span>
   <span class="hamburger__span"></span>
   <span class="hamburger__span--bottom"></span>
</div>

Sass

今回はカスタマイズしやすいようにSassを利用して書いていきます。以下が全体のコードです。

$width : 4rem;
$height : 3rem;
$span-height : 0.3rem;
$color : #666;
$active-color : #fff;

.hamburger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    width: $width;
    height: $height;
    cursor:pointer;

    @mixin span(){
        display: block;
        height: $span-height;
        width: $width;
        border-radius: $span-height;
        background: $color;
        transition: 0.5s;
    }

    &__span{
        @include span();
    }

    &__span--top{
        @include span();
    }

    &__span--bottom{
        @include span();
    }

}

.is-hamburger-active{
    .c-hamburger__span{
        background: $active-color;
        width: 0;
    }

    .hamburger__span--top{
        position: absolute;
        top: 50%;
        background: $active-color;
        transform: rotate(45deg);
    }

    .hamburger__span--bottom{
        position: absolute;
        top: 50%;
        background: $active-color;
        transform: rotate(-45deg);
    }
}

$width : 4rem;
$height : 3rem;
$span-height : 0.3rem;
$color : #666;
$active-color : #fff;

まず上記のコードでカスタマイズする可能性の高い場所を変数に書き出します。変数に書き出しておくことで今後この場所をいじるだけで色や大きさの変更が可能になるので便利です。

.hamburger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    width: $width;
    height: $height;
    cursor:pointer;

    @mixin span(){
        display: block;
        height: $span-height;
        width: $width;
        border-radius: $span-height;
        background: $color;
        transition: 0.5s;
    }

    &__span{
        @include span();
    }

    &__span--top{
        @include span();
    }

    &__span--bottom{
        @include span();
    }

}

上記のコードがメインのコードです。display:flexの部分で要素を縦並びで指定した高さに広がって配置されるようにしていきます。display:flexの説明は以下の記事をお読みください。

spanタグの方は共通のスタイルを定義するので、ミクスインで共通スタイルを書き出してそれを使用していきます。共通化して書く方法は他にもあると思いますが、個人的にはこの書き方が好みです。

.is-hamburger-active{
    .hamburger__span{
        display: none;
    }

    .hamburger__span--top{
        position: absolute;
        top: 50%;
        background: $active-color;
        transform: rotate(45deg);
    }

    .hamburger__span--bottom{
        position: absolute;
        top: 50%;
        background: $active-color;
        transform: rotate(-45deg);
    }
}

上記のコードは、クリックされてハンバーガーメニューのアイコンを×印に変えるスタイルを定義しています。上下に配置してあるものをまず中央寄せしてから、transform: rotate()を使って要素を回転させています。

元あるものを回転させて使うことで、とてもお洒落なアニメーションになるので、使ってみてください。

ちなみに、真ん中に配置してあったものは不要なので消しています。

jQuery

最後にjQueryを使用して、クラスの追加と削除を行っていきます。

$(function(){

    $(".hamburger").on('click',function(){
        $("hamburger").toggleClass("is-hamburger-active");
    });


});

toggleClass()を使用すればクリックするたびにクラスの追加と削除を行ってくれます。

まとめ

この記事はお洒落に×印に変わるハンバーガーメニューについて解説しました。主にスマートフォンでの表示の際によく使われるハンバーガーメニューですが、少しでもお洒落なアニメーションがついているだけでサイトのクオリティが高く見えますよね。カスタマイズもしやすいようになっているのでぜひ活用してみてください。

「読んだだけでは100%身に付きません」

必ず行動に移してください。

そう言っても、

行動する人は20%

それを継続する人は5%

行動し続けるだけで、

上位5％に入ることができます。

今すぐ行動して上位5％に入り、

Web制作で本気で人生変えたい

そんな人は今すぐ登録してください

今行動しなきゃ、人生変わらないですよ

こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！

是非登録してみて下さい！