【コピペで使える】 スマホメニューテンプレートまとめ、サンプルデモ 

どうもカトーです。

スマホメニューを先程作り直したのですが、折角ならまた使うのでサクっと使えるようにいくつか作ってみましたよ。
要件としてjQuaryが必要ですがそのまま利用できますので、どうぞです。

まぁ……これを記事するまでもないですが、自分で使う用途のメモでもあります(汗

基本のハンバーガーボタン

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.


下からでてくるメニュー

See the Pen
下からでてくるメニュー
by kato (@k-ato)
on CodePen.


これはtransform: translateY(1000%);とかしてるので、挙動には検証をどうぞ

 

中心から拡大してでてくるメニュー

See the Pen
中心から拡大してでてくるメニュー
by kato (@k-ato)
on CodePen.

なかなかダイナミック

最後に

いずれもCSS3の要素を変化させる「transform」や「animation」を使うと面白い感じで演出できますね。
適度に編集して浸かってください(主に私が)

 

最新情報をチェックしよう!
>システム構築・保守に特化した会社です。

システム構築・保守に特化した会社です。

システムの構築・保守運用「システムガーディアン」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG