【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。
動きがわかりやすいようにゆっくり動くように指定。
スピードを変えたいときは、transitionを変更する。

ん、ハンバーガー？

三本線がハンバーガーに見えるからってことらしいですよ

クリックエフェクト サンプル集

See the Pen
CSS / Hamburger Menu Click Effect Sample by 125naroom (@125naroom)
on CodePen.

実装サンプル 左上にボタンがあるタイプ

See the Pen
Hamburger Menu Sample01 by 125naroom (@125naroom)
on CodePen.

実装サンプル 右上にボタンがあるタイプ

See the Pen
Hamburger Menu Sample02 by 125naroom (@125naroom)
on CodePen.

実装サンプル 左上にボタンがあって全体に移動するタイプ

See the Pen
Hamburger Menu Sample03 by 125naroom (@125naroom)
on CodePen.

さいごに

いろいろありますねー

随時追加予定ですー