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

Just Mobile TENC for iPhone SE/5s薄さ約1mmで自己修復機能を搭載したiPhone SE/5s保護ケース「Just Mobile TENC for iPhone SE/5s」前のページ

サクサク動作する軽量なアコーディオンを実装できる「cascadingDivs」次のページcascadingDivs

関連記事

  1. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  2. jQuery_Overlay_Menu
  3. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  4. Clock Timepicker Plugin for jQuery
  5. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  6. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP