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

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  2. jQuery Glow
  3. no-image
  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  5. stroll.js

    JavaScript

    CSS3を使った豊富なスクロールエフェクト「stroll.js」

    stroll.jsはCSS3を使った豊富なCSSリストスクロールエフェ…

  6. jQuery Accordion

コメント

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

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

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP