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

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

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

参考サイト

PURE DRAWER
JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

デモ

See the Pen [CSS Only] Hamburger Menu Icon by Yoshiaki Itakura (@negibouze) on CodePen.

修正前

See the Pen [OLD] [CSS Only] Hamburger Menu Icon by Yoshiaki Itakura (@negibouze) on CodePen.

少し解説

• ハンバーガーの作り方
  spanを3つ並べてもできるのですが、今回は擬似要素（before, after）を使用しています。

span.toggle-icon

// 共通設定
.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）を利用します。

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

.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に設定しておいて表示、非表示を変更します。

span.toggle-text

// 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()