タブからアコーディオンに切り替わるレスポンシブ対応のjQueryプラグイン「jQuery Responsive Tabs」

jQuery Responsive Tabs

jQuery Responsive TabsというjQueryプラグインを使えば、タブパネルからアコーディオンに切り替わるレスポンシブに対応したタブを実装することができます。画面の横幅を縮小していくと、垂直型のアコーディオンになります。スマホではこちらの方が見やすいので閲覧する側も嬉しいですね。

jQuery Responsive Tabsの使い方

PCなどの閲覧時ではこのように一般的なタブパネルになっています。

jQuery Responsive Tabsの使い方

特定のブレイクポイントに来るとこんな感じでアコーディオンに切り替わります。

jQuery Responsive Tabsの使い方

使い方はとてもシンプルです。jQueryとプラグインを読み込んだら以下のようにHTMLをマークアップしていきます。

<div id="sample">
    <ul>
        <li><a href="#tab-1">...</a></li>
        <li><a href="#tab-2">...</a></li>
        <!-- ・・・中略・・・ -->
    </ul>

    <div id="tab-1">...</div>
    <div id="tab-2">...</div>
    <!-- ・・・中略・・・ -->
</div>

jQuery Responsive Tabsをセット。

$('#sample').responsiveTabs({
    startCollapsed: 'accordion'
});

タブのコンテンツはタブ切替時にアニメーションしながら切り替わっていくので、瞬時に違うタブメニューに変わったんだなっていうのが分かります。この辺りもすごくいいなって思いました。

というわけで、レスポンシブに対応しているタブパネルを実装したい時なんかに役立つプラグインですね。

jQuery Responsive Tabs

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives