jquery-side-navi

JavaScript

サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

jquery-side-naviは、サイドからスライドでタブコンテンツによるナビゲーションを表示できるjQueryプラグインです。シンプルなサイドナビゲーションを実装したいときに役立ちますね。スライドは左右どちらからでも設定可能です。サイトのメニューを設置したり、SNSのシェアボタンなどを載せたりと、応用次第でいろいろ活用できるはず。

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

関連記事

  1. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  2. no-image
  3. Lightense Images
  4. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  5. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP