CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」

http://design-develop.net/web-design/30-css-and-javascript-tabs-solutions.html

数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのはCSS、javascriptで実現するタブインターフェイスを集めたエントリー「30 CSS and Javascript Tabs Solutions」です。


Sweet Tabbed Navigation Bar using CSS3

デザイン的に凝ったものから、jQueryやCSS3を使って印象的に見せるものまで、様々なタブインターフェイスが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

Sweet AJAX Tabs
TABの中身がAJAXでロードされる、タブインターフェイス。ローディングアニメーションも表示されます。

Animated Tabbed Content (jQuery)
おなじみのスライダーアクションとタブが上手く噛み合ったインターフェイス。

Slick Tabbed Content Area (jQuery)
コンテンツがアコーディオン形式で切り替わるjQueyを使ったタブインターフェイス。

上記の他にも様々なタブインターフェイスが公開されていました。基本的には同じような構造ですが、それぞれに特性がありますので、構築するサイトや要素によって選択すればより使い勝手の良いサイトになるのではないでしょうか?

30 CSS and Javascript Tabs Solutions :Speckyboy Design Magazine

Follow me!