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

# シンプルなハンバーガーメニュー
![burger.gif](https://qiita-image-store.s3.amazonaws.com/0/254652/d0ccf526-dfcc-377f-02e7-ca418fcc2cc3.gif)

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="abenosite" data-slug-hash="PVbyYQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="berger-01-simple">
  <span>See the Pen <a href="https://codepen.io/abenosite/pen/PVbyYQ/">
  berger-01-simple</a> by abenosite (<a href="https://codepen.io/abenosite">@abenosite</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


```js: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: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: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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="abenosite" data-slug-hash="KJNbMQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="berger-02-animation">
  <span>See the Pen <a href="https://codepen.io/abenosite/pen/KJNbMQ/">
  berger-02-animation</a> by abenosite (<a href="https://codepen.io/abenosite">@abenosite</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```js: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: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: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: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」の隠れた必殺機能の使い方をまとめてみた！
](http://webhacck.net/archives/2195479.html)
> URLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。