Tabby

JavaScript

軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」をご紹介します。ボタンタイプのベーシックなものから、水平に表示されるスタイル、垂直に表示されるスタイルがあります。マークアップもシンプルなので使いやすそうですね。

[ads_center]

使い方

以下はベーシックなタブメニューです。

Tabbyの使い方

HTMLです。data-targetに各コンテンツのidを指定してあげます。

<div class="tabs">
    <button data-target="#tab1">タブ1</button>
    <button data-target="#tab2">タブ2</button>
    <button data-target="#tab3">タブ3</button>
</div>

<div class="tabs-content">
    <div class="tabs-pane active" id="tab1">
        ・・・コンテンツ・・・
    </div>

    <div class="tabs-pane" id="tab2">
        ・・・コンテンツ・・・
    </div>

    <div class="tabs-pane" id="tab3">
        ・・・コンテンツ・・・
    </div>
</div>

他にも水平タイプのものや垂直タイプのスタイルもあります。ダウンロードや詳しい使い方は公式サイトで確認することができます。

2013年上半期jQueryプラグインまとめ2013年上半期に紹介したjQueryプラグイン50選まとめ前のページ

タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」次のページExcolo Slider

関連記事

  1. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  2. GRT Responsive Menu
  3. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  4. no-image
  5. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  6. CSS3 Menu Slider

コメント

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

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

最近の記事

  1. Anker PowerPort 5-in-1 37.5W Hub
  2. α7C + FE28-60mm F4-5.6
  3. Apple Watch Series 6
  4. iPad Air

アーカイブ

PAGE TOP