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. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  2. Multi-Step-Form-Js
  3. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

  4. jquery.horizonScroll.js
  5. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  6. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP