きれいなCSSタブベースの50以上のナビゲーションスクリプト

ユーザーエクスペリエンスデザイナーにとって最も重要なタスクの1つは、 ウェブサイトのナビゲーションはシンプルでユーザーフレンドリーです. ナビゲーションタブ以外でこれを可能にする他の方法.

うまく設計されたナビゲーションタブは、ユーザがどこに行くべきかを知るのを助けるだけでなく、あなたのウェブサイトまたはブログの内部ページにトラフィックを誘導することも重要です。.

それで、私のウェブデザイナーの友人のために、ここに素晴らしくてきれいなCSSタブベースのナビゲーションスクリプトの長いリストがあります。各オプションには ダウンロードソースと一緒にライブデモ. だから続けて、自分を見てみましょう.

bootstrap-tabs-x - ブートストラップタブの上に構築された拡張タブプラグイン。できる タブの整列、タイトルの回転、AJAXによるコンテンツの読み込み, そしてもっとたくさんの機能。 [デモ]

インジケータ付きの純粋なCSSタブ - JavaScriptを使わずに構築された、モダンでありながら直接的なタブライブラリ。つまり、それは 速くて美しい 同様に - あなたが最も人気のあるウェブサイトで見るのと同じくらい美しい。 [デモ]

ぶち - Tabbyを使用すると、ビデオを含むあらゆるコンテンツを表示できる単純な切り替えタブを作成できます。それはいろいろ提供します 高度なオプションとNPMとBowerをサポート も。 [デモ]

レスポンシブタブナビゲーション - JSとCSSに裏打ちされた最新の便利なタブ付きナビゲーション。 水平と垂直の配置スタイルをサポート. [デモ]

トグラー - Togglerはトグル可能な要素を含む純粋なJavaScriptプラグインです。 アコーディオンとタブ. また、ページ上の任意のアイテムだけを表示/非表示にすることもできます。 [デモ]

純粋なCSSタブ - A CSSとJSを使用して作成された単純なタブスニペット. サンプルコードはプレーンなタブを示していますが、CSSを使用してスタイルを変更することでタブを美しくすることができます。 [デモ]

タブーCSS - タブなどの単純なトグルコンポーネントを作成するためのCSS専用ライブラリ。このライブラリは、上記のライブラリのいくつかとは異なり、依存関係を必要としません - どんなJSコードも必要ありません。 [デモ]

Tabbis.js - Tabbisはシンプルでありながら高度なプラグインです。高度な設定オプションを使用すると、次のことができます。 ネストしたタブを作成してコールバックを定義する も。 [デモ]

レスポンシブピュアCSSタブ [デモ]

CSSタブ [デモ]

Pitayaを使ったタブ - Pitayaを使用したタブはあなたが作成するのを助けます アニメーション化されたトランジションタブ. ただし、それ自体がライブラリでありロード時間が長くなるPitayaを含める必要があります。 [デモ]

jTabs - jTabsは純粋なJavaScriptを使用して構築されたタブライブラリです。それはそれで構築されることを意味します jQueryのような外部の依存関係はありません そしていくつかの設定オプションもサポートします。 [デモ]

レスポンシブFlexboxタブ [デモ]

タブアコーディオン [デモ]

tabs.js - tabs.jsは、Accordion / Tabs of Bourbon Refillsに触発された純粋なJavaScriptのタブライブラリです。それはそのように敏感です 小さな画面でタブがアコーディオンに変わる. [デモ]

WellTabber - WellTabberはTabbyのようなもう一つの単純なJavaScriptプラグインです。後者のように、 タブを設定するためのさまざまなオプションをサポートします。. また、ナビゲーション矢印を表示することもできます。 [デモ]

3Dキューブタブ付きインタフェース [デモ]

ES6用タブモジュール [デモ]

CSSタブを使用した可変高さ [デモ]

材料設計タブ - 材料設計は、Vanilla JavaScriptを使用して構築されたタブスニペットに影響を与えた。それは 使い方が簡単でカスタマイズも可能. ただし、高度なオプションはありません。 [デモ]

アニメーションCSSタブ - Animated CSS TabsはCSS専用のタブシステムで、シンプルで明るいタブを作成できます。 TabbyやWellTabberとは異なり、それは 高度な設定はありません. [デモ]

pureTabs [デモ]

Vanilla JavaScriptのアクセシブルタブ [デモ]

Scifiスタイルのアニメーションタブ [デモ]

純粋なCSSブートストラップのアダプティブタブ - ブートストラップからヒントを得たタブシステム。CSSのみを使用し、JavaScriptは使用しません。それがもたらすユニークな機能は何ですか 画面に収まりきっているタブはドロップダウンリストに移動. [デモ]

折りたたみ式タブバー - このリストのさまざまなプラグインのように、純粋なCSS 3とJavaScriptをベースとしないタブウィジェット。面白いのは、タブに 見栄えの良い折りたたみ式トランジション. [デモ]

素晴らしいCSSアニメーションタブ [デモ]

JavaScript Tabifier - JavaScriptだけで構築された高度なタブプラグイン。デフォルトのタブを設定したり、タブを動的に変更したりできます。 onLoadおよびonClickイベントコールバック関数を追加しました. [デモ]

スケルトンタブ [デモ]

Tabtastic - TabtasticはCSSとJSを使ってタブを実装するための簡単なプラグインです。それ セマンティックマークアップを使用し、スクリーンリーダーにアクセス可能, ページ上のタブのネストをサポートします。 [デモ]

CSS3とjQueryのフォルダタブ - この簡単なチュートリアル（ダウンロード可能なコード付き）について CSS3とjQueryを使ってフォルダタブを作成する. Google Chromeなどのブラウザに表示されるタブを思い出します。 [デモ]

タブ付きコンテンツ [デモ]

等幅ナビゲーションタブ - 等幅のナビゲーションタブを作成するためのプレーンなCSSの使用法を示すコードスニペット。あなたはできる 外観をカスタマイズするが、箱から出して高度なオプションを提供するわけではない. [デモ]

jQueryとCSSによるタブ付きコンテンツ [デモ]

Twitterのブートストラップウィザード - Twitter Bootstrap Wizardは、タブ構造のウィザードを構築するためのプラグインです。次のボタンと前のボタンを非表示にするか削除することで、タブだけを作成できることに気付きました。 [デモ]

純粋なCSSタブ [デモ]

レスポンシブCSSタブ [デモ]

もう一つのCSSタブ - CSSだけで作られた美しく細工されたタブ構造 最近のブラウザで動作します. しかし、上記のいくつかの強力なプラグインとは異なり、高度なオプションはありません。 [デモ]

タブへのレスポンシブアコーディオン - タブに対応するアコーディオンは、その名前が示すように、画面幅に基づいてアコーディオンまたはタブとして機能します。それ 可能であればタブを表示し、サイズが小さければアコーディオン. [デモ]

カードタブ - CardTabsは jQueryに基づく超軽量タブプラグイン, 複数のテーマがあります。新しいテーマを作成してアクティブなタブを動的に設定することもできます。 [デモ]

アリアタブ [デモ]

最小＆セクシータブ - それは美しい、新しいタブスニペットです。 2つの配色で利用可能 - 明るいと暗い. jQueryを使用して構築されているので、上記の他のプラグインほど軽量ではありません。 [デモ]

タブ付きウィジェット [デモ]

アダプティブタブ - アダプティブタブはシンプルで美しいタブの断片です。モダンなデザインとは別に、それは上記のいくつかの高度なプラグインで利用可能なようなより多くの機能を持っていません。 [デモ]

ツリースタイルタブ [デモ]

Tabulous.js [デモ]

jQueryタブ - jQuery Tabsはタブを作成するためのシンプルなプラグインです。その名前が示すように、それは 上記のプラグインとは異なり、jQueryを使用して構築されています。 純粋なCSSまたはJavaScriptで構築されています。 [デモ]

jQueryのrTab [デモ]

編集者注： この記事は、もともと2008年6月に発行され、新しい内容に基づいて2018年4月に更新されました.