jQuery Responsive Tabs

JavaScript

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

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

[ads_center]

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

関連記事

  1. slimMenu
  2. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  3. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  4. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  5. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  6. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP