Edited at

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