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. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  2. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  3. BookBlock Revised
  4. Responsive Elements
  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP