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. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  2. Docked Link jQuery Plugin
  3. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  4. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  5. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  6. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP