タグ: CSS

マウスオーバー、クリックでメニューが展開するアコーディオンUI色々

【その1】
NETTUTS – Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

AJAX+CSSでメニューが縦に展開します。同一ウインドウでコンパクトにコンテンツを魅せたいときに。
デモあり。

【その2】
JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

こちらもAJAX+CSSのアコーディオンメニューですが、横に展開します。&うにゅーんとゴムを引っ張ったようなスムーススライドです。

【その3】
The CSS-Only Accordion Effect – CSSnewbie

こちらは、CSSのみで実装のアコーディオンUIです。解説も細かく(英語だけど)勉強にもなりますね。

【その他】

コンセプトは、同じですが、こんなに色々なデザインや動きがあるのね、ってくらい、色々あってどれも面白いです。

CSSレイアウトのチート集12

http://www.zachgraeve.com/css-cheats/

汎用レイアウトのHTML&CSSソースが公開されています。

これを元に使えば、制作作業が効率かできます。
使いたいレイアウトをクリックして選んだ後、左上の「View Souce」でソースを表示させ、コピペします。HTMLとCSSは1つのソースになっているので、CSSを別ファイルにして、リンクを貼ればOK!