jQuery Tabs with Content Overlays

JavaScript

スタイリッシュなタブコンテンツを実装できる「jQuery Tabs with Content Overlays」

jQuery Tabs with Content Overlaysは、jQuery Tabs UIを使用したコンテンツオーバーレイを実装することができます。かっこいいスタイリッシュなタブコンテンツを自サイトに設置したい人は要チェックです。

jQuery Tabs with Content Overlays

デモ

デモでは、4つの項目が並んだタブメニューが表示されており、各項目をクリックするとタブメニュー全域にコンテンツがオーバーレイで表示されます。

表示されたコンテンツの右上にはクローズボタンがあり、ここから元のタブメニューへ戻ることが可能です。

アニメーションは特にありませんが、サクサクとコンテンツやメニューを切り替えることができるので、ストレスの少ない操作感を体感できると思います。

ちなみに、デモページはレスポンシブにも対応しています。ブラウザ幅を縮小すると、それに合わせてタブメニューのレイアウトも最適化されます。

4つのメニュー項目が横に並んだレイアウトから、2つのメニュー項目 × 2列、そして最終的には4つのメニューが縦に並んだレイアウトに変化します。PC、タブレット、スマホとさまざまなデバイスから閲覧しやすい仕様になっています。

複雑な機能は特になく、シンプルがゆえにいろんなサイトに合わせやすいのが魅力的ですね。スタイリッシュなタブコンテンツを実装したい人は、ぜひ「jQuery Tabs with Content Overlays」を活用してみてはいかがでしょうか?

jQuery Tabs with Content Overlays

関連記事

  1. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  2. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  3. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  4. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  5. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP