CSSだけで作るハンバーガーメニューアイコン（アニメーション付き）

だいぶ今更感がありますが、結構いい感じのができたので。

[2019/08/15 追記]
今更ながら、ムダなスタイルが入っているのに気が付いたので見直しました。

## 参考サイト
[PURE DRAWER](http://mac81.github.io/pure-drawer/)
[JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法](http://theorthodoxworks.com/web-design/drawer-menu-in-css-checkbox/)

## デモ
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="negibouze" data-slug-hash="JjPXyNp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="[CSS Only] Hamburger Menu Icon">
  <span>See the Pen <a href="https://codepen.io/negibouze/pen/JjPXyNp/">
  [CSS Only] Hamburger Menu Icon</a> by Yoshiaki Itakura (<a href="https://codepen.io/negibouze">@negibouze</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

**修正前**

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="negibouze" data-slug-hash="xRXLBM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="[OLD] [CSS Only] Hamburger Menu Icon">
  <span>See the Pen <a href="https://codepen.io/negibouze/pen/xRXLBM/">
  [OLD] [CSS Only] Hamburger Menu Icon</a> by Yoshiaki Itakura (<a href="https://codepen.io/negibouze">@negibouze</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
## 少し解説
- ハンバーガーの作り方  
`span`を3つ並べてもできるのですが、今回は擬似要素（before, after）を使用しています。

```pug
span.toggle-icon
```

```stylus
// 共通設定
.toggle-label
  cursor pointer
  .toggle-icon
  .toggle-icon:before
  .toggle-icon:after
    position relative
    display block
    height 3px
    width 32px
    background #5d809d
    transition all 500ms ease-in-out

// 個別設定（位置を調整する）
.toggle-label
  .toggle-icon
    top 50%
    left 50%
    transform translate3d(-50%, -5px, 0)
    &:before
      content ''
      transform translate3d(0, -10px, 0)
    &:after
      content ''
      transform translate3d(0, 7px, 0)
```

- アニメーション  
非表示のチェックボックスと擬似クラス（checked）を利用します。

```pug
input.toggle#toggle(type="checkbox")
label.toggle-label(for="toggle")
  span.toggle-icon
```

```stylus
.toggle:checked ~ .toggle-label
  .toggle-icon
    background-color transparent
  .toggle-icon:before
  .toggle-icon:after
    top 0

.toggle:checked ~ .toggle-label
  .toggle-icon:before
    transform rotate(45deg)
  .toggle-icon:after
    transform translateY(-2px) rotate(-45deg)
```

- テキストの切り替え  
それぞれを`:before`と`:after`に設定しておいて表示、非表示を変更します。

```pug
span.toggle-text
```

```stylus
// functions
subscript(content)
  position absolute
  width 100%
  left 0
  content content
  transition all 500ms ease-in-out

show()
  visibility visible
  opacity 1

hide()
  visibility hidden
  opacity 0

.toggle-label
  cursor pointer
  .toggle-text
    position relative
    display block
    top calc(100% - 14px)
    height 14px
    fontSize 0.8
    color #5d809d
    text-align center
    &:before
      subscript('MENU')
      show()
    &:after
      subscript('CLOSE')
      hide()

.toggle:checked ~ .toggle-label
  .toggle-text
    &:before
      hide()
    &:after
      show()
```