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. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  3. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  4. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  5. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  6. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

コメント

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP