TOP  >  WebDesign  >  スムーズに伸縮するシンプルなタブインターフェイス「Organic Tabs」
2009年10月31日

スムーズに伸縮するシンプルなタブインターフェイス「Organic Tabs」

少ないスペースで様々な情報を格納できるタブ式のインターフェイス。現在では情報サイトをはじめとして様々なサイトで導入されていますが、今回紹介するのはシンプルかつ機能的なタブインターフェイス「Organic Tabs」です。

organictabs01

非常に使い勝手が良くリストタグとjQueryのみで実現できるので、実装もシンプルで簡単になっています。挙動のスクリーンキャストを収めた動画が公開されていましたので下記に貼り付けておきます。

動画は以下から

ブログをはじめとして様々なサイトで使えそうです。実際の動作デモはこちらから見ることができます。また基本的にはCSSでデザインは制御されていますので、カスタマイズも容易にできるかと思いますので、動画の前半のようなものもコチラをベースに仕上げることも可能です。

英語サイトでの配布となっていて、ドキュメントも英語ですが、サンプルをダウンロードできるようになっておりますので、英語が苦手な方でも簡単に利用できるかと思います。

Organic Tabs | CSS-Tricks

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

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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