jQuery Sidebar

JavaScript

上下左右からクイックなスライド表示させることができるjQuery Sidebar

jQuery Sidebarは上下左右からスライド表示させることができるプラグインです。テンポの良いクイックなスライドでサイドバーが出現してきます。シンプルですが応用範囲は広そうな感じですね。以下は使い方です。

jQuery Sidebarの使い方

jQuery Sidebarを使う場合は、まず以下のようにhead内にjQueryとプラグインファイルを読み込んでおきます。

<script src="jquery.min.js"></script>
<script src="jquery.sidebar.min.js"></script>

続いてサイドバーのコンテンツを記述していきます。クラス名にはsidebar、そして上下左右(left、right、top、bottom)のいずれかを設定します。ここではrightを指定。

<div class="sidebar right">コンテンツ</div>

あとはjQuery Sidebarを呼び出してあげるだけです。

 $(".sidebar.right").sidebar({side: "right"});

オプションでspeed(デフォルトは200)やside(デフォルトはleft)、他にもisClosedやcloseなどを設定することができます。

普段はサイドバーを非表示にしておき、アクションがあれば表示させるといった場合に役立つプラグインですね。

jQuery Sidebar

関連記事

  1. CSS3 Menu Slider
  2. jquery.confirmDialog
  3. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  4. parallax-background.js
  5. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  6. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

最近の記事

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

アーカイブ

PAGE TOP