TOP  >  WebDesign  >  CSS、javascriptで実現するタブインターフェイス集「30 CSS and Javascript Tabs Solutions」
2010年09月11日

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

数多くの情報をまとめて、限り有るスペースを有効活用することができるタブインターフェイス、情報量の多いサイトで主に利用されていますが、今回紹介するのは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

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 02:00  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る