Sidr

JavaScript

横からサイドメニューが現れるjQueryプラグイン「Sidr」

面白いjQueryプラグインがあったのでメモがてらご紹介します。Sidrは画面の横からクイッとサイドメニューを表示させることができます。左右のどちらかを指定することで好きな方向からメニューが現れます。メニューボタンをクリックしないと表示されないので普段のレイアウトもスッキリしそう。

[ads_center]

使い方

ダウンロードしたプラグインファイルを読み込みます。CSSテーマファイルもあります。

<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
<script src="javascripts/jquery.js"></script>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>

マークアップもとてもシンプル。Sidrもセットします。

<a id="simple-menu" href="#sidr">menu</a>
 
<div id="sidr">
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

また、メニューは複数設置することもできます。左のメニューと右のメニューを同時に設置したりもできるので便利ですね。例えば、左メニューはグローバルメニューで右メニューはカテゴリーなんてのもよさそう。

Sidrのダウンロード、実際のデモの確認は以下からどうぞ。

関連記事

  1. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  5. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  6. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP