Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

[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()
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away