シンクグラフィカ札幌

テクニカルノート

スマートフォン用の横から出てくるナビゲーションCSS

2013-11-03

スマートフォンでよくある横からピロッと出てくるナビゲーションメニューをCSSだけで実現するとこうなる。

というようなネタ。私はJavascriptでやりますけどね。レスポンシブWebなどでjsをあまり絡めたくない場合、擬似クラスって本当に便利ですよね。擬似クラスのtargetを利用してハッシュが付いた時にfixedの座標をズラしているだけですが。

まー個人的にはjavascriptでやったほうが良いとは思いますけど、ちょっとした事で使いたい場合なんかはCSS3のtransitionをつければアニメーションにもなるし、割りと良い出来栄えなんじゃないかなと。CSS3って本当に便利。そういやCSS3が出始めたころは「Javascriptいらなくなるんじゃね?」なんて話もありましたっけ。

と、いうことで手軽にサクッとスマートフォン用のぴろっと横から出てくるアニメーションメニューを表示させたい場合は参考にしてください。

サンプルページ

添付ファイル

テクニカルノートの一覧 『クラウドマインド』公開前最終テストのお願い
新規コメント出力エリア

エラーメッセージ出力