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

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

2013-11-03

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

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

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

サンプルページ

コメント欄