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

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  5. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

コメント

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

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

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP