TOP  >  WebDesign  >  シンプルで軽量なアコーディオンインターフェイス「Simple Javascript Accordions」
2008年11月05日

シンプルで軽量なアコーディオンインターフェイス「Simple Javascript Accordions」

ブログやWEBページでメニュー部分がものすごく長くなるのは、使い勝手的にはあまり良い物ではありません。ただ日々運営していれば様々なアイデアが生まれコンテンツは増え続けてくると思います。そんな時に便利なのがコンテンツを格納できるアコーディオン式のメニュー。

様々なタイプのものがリリースされていますが、今回紹介する「Simple Javascript Accordions」は1年前に作られた物ではありますが、シンプルな構造と軽さと動きが気持ちよかったので改めて紹介したいと思います。

名前の通りjavascriptで動作し、サイズも1,149バイトと非常に軽量になっていますし、シンプルなだけにブラウザにも幅広く対応しています。また様々なタイプのアコーディオンが用意されていますので、サイトにあった形で実装できます。動作デモは「Simple Javascript Accordions」からご覧ください。

デザインはCSSで制御され、同一ソース内に書かれてていますので非常に簡単にカスタマイズできます。またソースにもコメントが詳しく書かれていて実装も簡単にできます。

コメント欄を見てみると実際にこちらをベースにしたカスタマイズされたものが「Styling an Accordion with CSS」で公開されています。カスタマイズを考えられている方は参考にどうぞ。

Deziner Folio» Blog Archive » Simple Javascript Accordions

posted 11:47  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る