オフキャンパスナビゲーションが簡単に実装出来るjQueryプラグインの『jQuery Navobile』

WEB制作

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

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

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

jQuery Navobile

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

スクリーンショット 2014 06 23 午前5 08 50

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

スクリーンショット 2014 06 23 午前5 11 21 2 1

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

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

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

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

コメント

Pagetop