【今日から携わる】jQueryで作るハンバーガーメニュー（シンプル&アニメーションなど）

シンプルなハンバーガーメニュー

berger-01-simple
https://codepen.io/abenosite/pen/PVbyYQ

See the Pen berger-01-simple by abenosite (@abenosite) on CodePen.

js

/*
* ハンバーガー
*/
$(function () {
  $(".burger-icon").on("click", function () {
    if ($(this).hasClass("is-burger-nav-open")) {
      $(this).removeClass("is-burger-nav-open");
      $(".burger-nav").removeClass("open");
    } else {
      $(this).addClass("is-burger-nav-open");
      $(".burger-nav").addClass("open");
    }
  });
});

html

<header>
    <a class="burger-icon" href="#">
        <span></span>
        <span></span>
        <span></span>
    </a>
    <nav class="burger-nav">
        <a href="">シンプルバーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
    </nav>
</header>

scss

/**
 * 設定
 */

/* メディアクエリ */
$mq: 768px;

@mixin mq {
    @media (max-width: $mq) {
        @content;
    }
}

/* burger */
$burger-color: #333;
$burger-color-hover: #00f;
$burger-color-overlay: #fff;

.burger-nav {
  padding-top: 50px;
  max-width: 600px;
  margin: auto;
    display: flex;
    justify-content: space-between;

    @include mq {
        display: block;
        color: #fff;
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;

        &.open {
            display: block;
        }

        &.close {
            display: none;
        }
    }


    a {
      color: $burger-color;
      text-decoration: none;
        @include mq {
            display: block;
            color: $burger-color-overlay
        }
        &:hover {
          color: $burger-color-hover;
        }
    }
}

.burger-icon {
    @include mq {
        display: block;
        width: 25px;
        height: 18px;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 20;

        span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: $burger-color;
            border-radius: 4px;
            transition: all 0.4s;

            &:nth-of-type(1) {
                top: 0;
            }

            &:nth-of-type(2) {
                top: 8px;
            }

            &:nth-of-type(3) {
                bottom: 0;
            }
        }

        &.is-burger-nav-open {
            span {
                background-color: $burger-color-overlay;

                &:nth-of-type(1) {
                    transform: translateY(8px) rotate(-45deg);
                }

                &:nth-of-type(2) {
                    opacity: 0;
                }

                &:nth-of-type(3) {
                    transform: translateY(-8px) rotate(45deg);
                }
            }
        }
    }
}

クリックしたときにアニメーションをするハンバーガーメニュー（右から左へ）

berger-02-animation
https://codepen.io/abenosite/pen/KJNbMQ

See the Pen berger-02-animation by abenosite (@abenosite) on CodePen.

js

/*
* ハンバーガー
*/
$(function () {
  $(".burger-icon").on("click", function () {
    if ($(this).hasClass("is-burger-nav-open")) {
      $(this).removeClass("is-burger-nav-open");
      $(".burger-nav").removeClass("open");
    } else {
      $(this).addClass("is-burger-nav-open");
      $(".burger-nav").addClass("open");
    }
  });
});

html

<header>
    <a class="burger-icon" href="#">
        <span></span>
        <span></span>
        <span></span>
    </a>
    <nav class="burger-nav">
        <a href="">シンプルバーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
        <a href="">バーガー</a>
    </nav>
</header>

scss

/* アニメーション */
.burger-nav {
    animation-name: anime-burger;//作成したアニメーションの名前
    animation-duration: 0.5s;//アニメーション時間
    animation-timing-function: ease;//アニメーションのタイミング
}

@keyframes anime-burger {
    0% {
        transform: translateX(300px);//300px左に移動する
    }

    100% {
        transform: translateX(0);
    }
}

/* メディアクエリ */
$mq: 768px;

@mixin mq {
    @media (max-width: $mq) {
        @content;
    }
}

/* burger */
$burger-color: #333;
$burger-color-hover: #00f;
$burger-color-overlay: #fff;

.burger-nav {
    display: flex;
    justify-content: space-between;

    @include mq {
        display: block;
        color: #fff;
        position: fixed;
        right: 0;
        top: 0;
        display: none;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.7);
        width: 300px;
        height: 100%;

        &.open {
            display: block;
        }

        &.close {
            display: none;
        }
    }


    a {
        color: $burger-color;
        text-decoration: none;

        @include mq {
            display: block;
            color: $burger-color-overlay;
        }


        &:hover {
            color: $burger-color-hover;
        }
    }
}

.burger-icon {
    @include mq {
        display: block;
        width: 25px;
        height: 18px;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 20;

        span {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: $burger-color;
            border-radius: 4px;
            transition: all 0.4s;

            &:nth-of-type(1) {
                top: 0;
            }

            &:nth-of-type(2) {
                top: 8px;
            }

            &:nth-of-type(3) {
                bottom: 0;
            }
        }

        &.is-burger-nav-open {
            span {
                background-color: $burger-color-overlay;

                &:nth-of-type(1) {
                    transform: translateY(8px) rotate(-45deg);
                }

                &:nth-of-type(2) {
                    opacity: 0;
                }

                &:nth-of-type(3) {
                    transform: translateY(-8px) rotate(45deg);
                }
            }
        }
    }
}

ハンバーガーメニューを画像にする場合（SCSS以外は上記と同じ）

通常　　　　：　/assets/img/icon-burger.png
オープン　：　/assets/img/icon-burger-open.png

scss

/* アニメーション */
.burger-nav {
    animation-name: anime-burger;//作成したアニメーションの名前
    animation-duration: 0.5s;//アニメーション時間
    animation-timing-function: ease;//アニメーションのタイミング
}


@keyframes anime-burger {
    0% {
        transform: translateX(300px);//300px左に移動する
    }

    100% {
        transform: translateX(0);
    }
}

/* メディアクエリ */
$mq: 768px;

@mixin mq {
    @media (max-width: $mq) {
        @content;
    }
}

/* burger */
$burger-color: #333;
$burger-color-hover: #00f;
$burger-color-overlay: #fff;

.burger-nav {
    display: flex;
    justify-content: space-between;

    @include mq {
        display: block;
        color: #fff;
        position: fixed;
        right: 0;
        top: 0;
        display: none;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.7);
        width: 300px;
        height: 100%;

        &.open {
            display: block;
        }

        &.close {
            display: none;
        }
    }


    a {
        color: $burger-color;
        text-decoration: none;

        @include mq {
            display: block;
            color: $burger-color-overlay;
        }


        &:hover {
            color: $burger-color-hover;
        }
    }
}

.burger-icon {
    @include mq {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 30;

        width: 21.38px;
        height: 28.73px;
        background: url(/assets/img/icon-burger.png) no-repeat center center / contain;
        transition: all 0.4s;
        cursor: pointer;

        white-space: nowrap;
        text-indent: 110%;
        overflow: hidden;
    }
}


.is-burger-nav-open {
        background-image: url(/assets/img/icon-burger-open.png);
}

テスト用

<script src="hoge.js"></script>

実はスゴイ「CodePen」の隠れた必殺機能の使い方をまとめてみた！

URLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。