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

MindNodeのファイルをDropboxに保存iPhoneアプリのMindNodeで作成したファイルをDropboxに保存するやり方前のページ

iPhoneやiPadのGoodReaderでファイル名を変更(リネーム)するやり方次のページGoodReaderでファイル名を変更

関連記事

  1. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  2. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  3. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  4. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  5. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  6. Salvattore

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP