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. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  2. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  3. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  4. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  5. Crosscover

    JavaScript

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

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

  6. jquery.simple-scroll-follow

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP