JavaScript

フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-top Accordion」

いい感じのアコーディオンがあったので試してみたところ、とてもよさげだったのでメモがてらエントリー。アコーディオンパネルなんですが、画面サイズを変更してもちゃんとそれに合わせて対応してくれるのでこういう可変式なものが最近好きだったりします。だってiPhoneで見てもそれに合わせてくれますもんね。ということで基本的な使い方です。

[ads_center]

使い方

以下のサイトからダウンロードできます。

デモもありますのでこちらもどうぞ。まあ公式サイトからも見れますが。

ダウンロードしたCSS、JSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.accordion.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript">
$(function() {
    $('#st-accordion').accordion();
    });
</script>

基本的なマークアップです。

<div id="st-accordion" class="st-accordion">
    <ul>
        <li> <a href="#">タイトル1<span class="st-arrow">Open or Close</span></a>
            <div class="st-content"><p>サンプルです</p></div>
        </li>
        <li> <a href="#">タイトル2<span class="st-arrow">Open or Close</span></a>
            <div class="st-content"><p>サンプルです</p></li>
        <li> <a href="#">タイトル3<span class="st-arrow">Open or Close</span></a>
            <div class="st-content"><p>サンプルです</p></div>
        </li>
        <li> <a href="#">タイトル4<span class="st-arrow">Open or Close</span></a>
            <div class="st-content"><p>サンプルです</p></div>
        </li>
    </ul>
</div>

実際のブラウザで確認するとこんな感じになります。

Flexible Slide サンプル01

画面のサイズを小さくしてみると。

Flexible Slide サンプル02

ちゃんと対応してくれますね。

オプション

オプションもあるので自分に合ったカスタマイズもできるかと思います。例えば以下のように指定してあげるとパネルを開くと、その前に開いていたパネルが自動で閉じるようになります。

$(function() {
    $('#st-accordion').accordion({
        oneOpenedItem: true
    });
});

アニメーションのスピードを変更したい場合はこんな感じで指定してあげます。数値が高いほど遅く、低いほど早くなります。

$(function() {
    $('#st-accordion').accordion({
		speed: 300
    });
});

とまあこんな感じでフレキシブルなアコーディオンをとても簡単に実装できるのでオススメです。

MacでVMware Fusion 4にCentOS 6をインストールしてみた前のページ

マウスオーバーでメニュー以外の全体にオーバーレイがかかるクールなナビゲーションメニュー「Overlay Effect Menu with jQuery」次のページ

関連記事

  1. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  2. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

  3. no-image
  4. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  5. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  6. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP