CSSだけで作るハンバーガーメニュー

今更ですがcssだけでハンバーガーメニューを作ります。
widthとheightがあらかじめわかっていれば簡単です。
transform:translateYを使ったのは、active時の動作のためです。

html

cscc

ちょっとわかりにくいかもしれませんが・・・

 
 

See the Pen 170919 by M.Ueda (@nekuta) on CodePen.

 
 

jsで動きをつける

これだけでも十分使えますが、やっぱり動きをつけたい。
これにccsアニメーションをつけてjQueryのon clickで発火させます。

js(jQuery)

See the Pen 170910_2 by M.Ueda (@nekuta) on CodePen.

  • コーダーのための計算機