jquery-side-naviは、サイドからスライドでタブコンテンツによるナビゲーションを表示できるjQueryプラグインです。シンプルなサイドナビゲーションを実装したいときに役立ちますね。スライドは左右どちらからでも設定可能です。サイトのメニューを設置したり、SNSのシェアボタンなどを載せたりと、応用次第でいろいろ活用できるはず。
jquery-side-navi
以下からjquery-side-naviのデモを確認できます。
デモ(右)
上記は右からスライドするデモになります。左からのデモもありますよ↓
デモ(左)
画面の端に「Item 1」と「Item 2」と書かれたタブメニューが表示されているので、ここをクリックするとタブコンテンツがスライドアニメーションで表示されます。コンテンツはタブメニューから切り替えることができます。
連続して同じタブメニューをクリックすると、今度はスライドしながらタブコンテンツが非表示になります。
シンプルだからこそ、いろんなサイトに合わせやすいのではないでしょうか。
また、スタイルシートには「sidenavi-left.css」と「sidenavi-right.css」の2種類が用意されており、左からスライドさせたい場合は「sidenavi-left.css」を、右からスライドさせたい場合は「sidenavi-right.css」を読み込めばOKです。
あとはパラメーター(init)に「left」か「right」を指定して、同時にここからcontainerやtabなどへナビゲーションに設定したidやclassも指定すれば実装できます。
というわけで、タブコンテンツによるナビゲーションをサイドからスライドアニメーションで表示させたい方は、ぜひチェックしてみてはいかがでしょうか?
jquery-side-naviのダウンロードや詳細は以下からどうぞ。