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. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  2. jQuery Floating Social Share
  3. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  4. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  5. no-image
  6. Multi-Screen.js

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP