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. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  3. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  4. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  5. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  6. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP