以前、Facebookっぽいナビゲーションをレスポンシブデザインで実装するプラグイン／チュートリアル色々という記事を書かせて貰った事があるんですが、今回たまたま見つけたNavobileというjQueryプラグインがかなり楽ちん完成度高めだったので、ちょっとご紹介させて頂ければと思います。

こう、スマフォでFacebookアプリ使う時、画面がスライドしてナビゲーションが表示されるあの動きですね。あの動きをオフキャンパスナビゲーションと言うらしいのでメモ！

それでは行ってみましょー！

jQuery Navobile

元サイトもそうなってるんですが、PCブラウザから見たらこんな感じ。

それをスマフォで開くと、

こういう動きが可能になる奴ですね。ちなみにレスポンシブナビゲーションの種類はこちらに色々と紹介されてあるので、是非ご参考にどうぞ〜。

実装も恐らくサンプルファイルを見ながら実装してみたら恐らくすぐわかるかと、Githubも公開されてるのでどうぞ。

ちなみにサンプルはそのままでは動きません、とりあえず動作だけ確認してみたい方は以下のコードをHTMLに追記してみましょう。

それでは皆さん、良きオフキャンパスライフを〜。