どうもカトーです。
スマホメニューを先程作り直したのですが、折角ならまた使うのでサクっと使えるようにいくつか作ってみましたよ。
要件としてjQuaryが必要ですがそのまま利用できますので、どうぞです。
まぁ……これを記事するまでもないですが、自分で使う用途のメモでもあります（汗
基本のハンバーガーボタン
See the Pen
スマホメニューサンプル 基本 by konica (@k-ato)
on CodePen.
右からでてくるメニュー
See the Pen
右からでてくるメニュー by kato (@k-ato)
on CodePen.
左からでてくるメニュー
See the Pen
左からでてくるメニュー by kato (@k-ato)
on CodePen.
上からでてくるメニュー
See the Pen
上からでてくるメニュー by kato (@k-ato)
on CodePen.
下からでてくるメニュー
See the Pen
下からでてくるメニュー by kato (@k-ato)
on CodePen.
これはtransform: translateY(1000%);とかしてるので、挙動には検証をどうぞ
中心から拡大してでてくるメニュー
See the Pen
中心から拡大してでてくるメニュー by kato (@k-ato)
on CodePen.
なかなかダイナミック
最後に
いずれもCSS3の要素を変化させる「transform」や「animation」を使うと面白い感じで演出できますね。
適度に編集して浸かってください（主に私が）
