ハンバーガーメニュー

jQueryでボタンがクリックされたらクラスを付与する。クラスが付与されたらCSSのアニメーションでナビゲーションの動きを実現する。

3本線が×になる

See the Pen ハンバーガーメニュー（3本線が×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

2本線が×になる

See the Pen ハンバーガーメニュー（2本線が×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

3本線が1本線になる

See the Pen ハンバーガーメニュー（3本線が1本線に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

MENUがCLOSEになる

See the Pen ハンバーガーメニュー（MENUがCLOSEに） by Toru Katsumata (@Toru-Katsumata) on CodePen.

MENUが×になる

See the Pen ハンバーガーメニュー（MENUが×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

3本線が回転して×になる

See the Pen ハンバーガーメニュー（3本線が回転して×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

3本線が奥行きを持って回転して×になる

See the Pen ハンバーガーメニュー（3本線が奥行きを持って回転して×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

3本線が横方向に回転して×になる

See the Pen ハンバーガーメニュー（3本線が横方向に回転して×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

3本線がジャンプして×になる

See the Pen ハンバーガーメニュー（3本線がジャンプして×に） by Toru Katsumata (@Toru-Katsumata) on CodePen.