初心者でも簡単実装！ハンバーガーボタンの作り方を解説します。

JavaScript Web制作

初心者でも簡単実装！ハンバーガーボタンの作り方を解説します。

※本記事は広告が含まれる場合があります。

なやむくん
クリックして×印にする動き難しそう…
なやむさん
どのような仕組みで動いているのか理解できるようになりたい

などの疑問や悩みを解決してまいります。

Webサイトの作成においてハンバーガーメニューは欠かせない機能になっています。

しかし、クリックしたら×印になる仕組みだったり、ハンバーガーボタン難しいと思っていませんか？

この記事では初心者や苦手意識がある方でも簡単に実装できる方法をわかりやすく解説します。

みつた
×印になる仕組みはいたってシンプルです！

ハンバーガーボタン完成例

完成例はこちらです。

See the Pen ハンバーガーボタン by koutarou mori (@koutarou-mori) on CodePen.

至ってシンプルなハンバーガーボタンですが、苦手意識がある方がいるのも事実です。

でも安心してください。自分も最初は難しそうと毛嫌いしていましたが、一つ一つのコードを見てみるとそんなに難しくないですよ！

それでは解説していきます。

HTML解説

ソースコードを見てみましょう。

<body>
    <div class="hamburger">
        <div class="inner">
            <span></span>
            <span></span>
            <span></span>
        </div><!-- /.inner -->
    </div><!-- /.hamburger -->
</body>

三本の線は中身が空のspanタグを用意して、そこにCSSを指定して作成しています。

そしてhamburgerクラスがクリックされるとhamburgerクラスにactiveクラスが付与されるようにjsで設定しています。

jsについてはまた後程説明いたしますので、クリックするとactiveクラスが付与されるということだけ理解していただけたら問題ありません。

みつた
HTMLで注目する点は2点です。

ポイント

〇 三本の線は要素の中身が空っぽのspanタグにCSSを指定して作成している

〇 hamburgerクラスをクリックすると、activeクラスが付与される指定をJSで行う

CSS解説

ソースコードを見てみましょう。

.hamburger {
    width: 70px;
    height: 70px;
    background-color: #222;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.inner {
    width: 50px;
    height: 30px;
    position: relative;
}
.hamburger span {
    position: absolute;
    left: 0;
    width: 50px;
    height: 6px;
    background-color: #fff;
    border-radius: 10px;
    transition: all .5s;
}
.hamburger span:nth-child(1) {
    top: 0;
}
.hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
    bottom: 0;
}
/* ハンバーガーボタンが押されたら */
.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

重要ポイントはactiveクラスが付与されたときのspanタグのCSSです。

transformプロパティのtransformYでY軸の位置（高さ）を指定、rotateで要素を回転させて×印を作ります。

上記ソースでは、一番上の線を45度（45deg）に回転、一番下の線を逆方向に45度（-45deg）回転させています。

真ん中の線は不要なのでopacityプロパティを指定して透明（値を0）にして見えなくしています。

高さは×印の交差している点を要素の中心としたいので、topプロパティに50％をtranslateYプロパティには-50％を指定して上下中央配置しています。

また動きを滑らかにしたいので、動きがあるspanタグにtransitionプロパティを指定します。

.5sと指定していますが、0.5秒間かけて動かせるということですので、どれぐらいの時間をかけて×印にするかはお好みで。

みつた
CSSで注目する点は4点です。

ポイント

〇 activeクラスが付与されたときのspanタグの形を×印にする

〇 ×印の高さをtopプロパティとtranslateYプロパティを指定して上下中央配置にする

〇 1番上の線を45度（45deg）に回転、1番下の線を逆方向に45度（-45deg）回転させる

〇 真ん中の線はopacityプロパティを指定して透明化にして見えなくする

JS解説

JSが初心者にとって難解かもしれませんが、とても短いコードで実装していますので難しく考える必要はありません。

$(function() {
    $('.hamburger').on('click', function(){
        $(this).toggleClass('active');
    })
})

これは「hamburgerクラスをクリックしたら、そのクラスにactiveクラスを付けますよ」というコードです。

これ以上でも以下でもなくこれだけです。

今回はクリックする部分をhamburgerクラス、×印にするためのクラスをactiveクラスにしましたが、別のクラスを使用したい場合はこの2カ所を変更するだけでOKです。

ポイントはaddClass()ではなく、toggleClass()を使用していることです。

addclass()だけではactiveクラスを付与することはできても、×印から通常時に戻す動作ができません。

しかし、toggleClass()を指定することでこれ1つで通常時から×印、×印から通常時に戻すことも可能となっています。

みつた
JSで注目する点は1点です。

ポイント

〇 addClass()を使用せず、toggleClass()を使用することでactiveクラスを取り除く動作も可能

【オススメ】たった2カ所のCSSの値を変更することでより動きをかっこよくする

CSSの解説時に×印にする動きのうち回転を指定しているのは、transformプロパティのrotateであると説明しました。

こちら現在は45deg（逆は-45deg）で作成していますが、この値を変更することでさらにかっこいい動きに変化します。

以下をご覧ください。

See the Pen ハンバーガーボタン【かっこいいバージョン】 by koutarou mori (@koutarou-mori) on CodePen.

いかがでしょうか。

変更したのはたったの2カ所で、transformプロパティのrotateの値を315deg（逆は-315deg）に変更しただけです。

回転数が変わるだけで見え方もグッと変わるので、お好みで是非調整してみてください。

-JavaScript, Web制作