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

細くて(ウルトラライト)エレガントなフォント20選前のページ

Nexus 5でテザリングしてiPhoneをネットに接続させるやり方次のページNexus 5でテザリングしてiPhoneを接続

関連記事

  1. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  2. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  3. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  4. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  5. jQuery.fontFlex
  6. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP