WEB Tips デザイン・コーディング

レスポンシブなタブメニュー CSS&JS -Tab UI

2015-04-07

本記事にはプロモーションが含まれています。

レスポンシブなタブメニュー CSS&JS -Tab UI

決まったスペースにコンテンツを効率的にレイアウトしたいとき、タブインターフェイスが使われていることはよく有ります。

ニュースサイトではカテゴリーの新着ニュースを、ECサイトでは商品の説明や仕様をタブを使ってコンパクトにまとめらているのを見かけます。

タブの使用例:ニュースアプリ

どちらも画面上部にナビゲーションとしてタブが配置されていて、スワイプできるようになっています。

タブ使用例:NHKニュース・防災アプリ
タブ使用例:スマートニュース

タブの使用例:ECサイト

商品アイテムの説明やサイズ、レビューなどをスクロールせずに確認できるので、商品画像を見ながら検討することができます。

タブ使用例:ショッピングサイトBAYCrews Store

このようにタブを実装するとユーザービリティ向上にも役立ちます。

ここではレスポンシブサイトでタブを実装例を取りあげます。

CSSのみのシンプルなタブメニュー

See the Pen Responsive Tabs by mixtaro (@mixtaro) on CodePen.

JavaScriptなしのCSSだけで実装するシンプルなタブです。

JavaScriptのクリックを判定するイベントハンドラをinputlabelで実現しています。

<input id="tab-1" name="tabnav" type="radio" checked="checked"/>
<label class="tab-menu-item" for="tab-1">タブ1</label>

inputid属性にはlabelfor属性と同じ名前を指定します。最初に選択された状態にするタブにchecked属性をつけます

CSSのみのシンプルなタブ:スマホではアコーディオン

See the Pen Responsive Tabs/Accordion -only CSS/ by mixtaro (@mixtaro) on CodePen.

ほぼ同じCSSのみのタブですが、スマホなどモバイル環境ではアコーディオンになります。

CSS+jQueryのタブ

CSSとjQueryのシンプルタブ

前半の16行目ぐらいまでは、特定のタブへリンクできるようにハッシュの値を取得するようにしています。

特定のタブへダイレクトリンクする場合は以下のようにします。

<p><a href="tab-c.html#content-2">タブ2へリンク</a></p>

jQuery不要の軽量スクリプトでタブを実装する

JavaScript はYetiiというカスタマイズしやすいスクリプトでタブを作成します。

Yetii
http://www.kminek.pl/lab/yetii

  • 複数タブの設置
  • 自動ローテーション
  • 前後のナビゲーション設置
  • 特定のタブにカスタム関数を設置

決まりとしてナビゲーション用のulタグには「タブコンテナーID+nav」というIDをつけます。

上のコードではIDが#tab-container1なのでul#tab-container1-navをつけます。

タブ DEMO

idタブコンテナーのID
tabclassデフォルトのtabclassを上書きする
active最初にアクティブにするタブを指定
interval自動ローテションする秒数を指定
ユーザーがタブを操作した時は停止する
wait秒数を指定
ユーザーがタブを操作した後、指定した秒数後にローテーションを開始する
callbackコールバック関数を設定
指定できるパラメータ

外部ページから特定のタブへダイレクトリンクする

<a href="example.html?tab-container-1=2">exampleページの#tab-container-1内の2番目のタブ</a>

タブDEMOページのタブ2の4番目のタブにリンク

タブUIに関する記事はこちらも参考になります。

特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]

タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。 ...

続きを見る

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-