[CSS]スタイルシートで実装するアコーディオンエフェクト

CSSnewbieのエントリーから、スクリプトを使用しないで、スタイルシートで実装するアコーディオンエフェクトを紹介します。

The CSS-Only Accordion Effectのキャプチャ

The CSS-Only Accordion Effect
デモ:アコーディオン横タイプ
デモ:アコーディオン縦タイプ

それぞれのパネルはdivで囲まれており、通常時は「overflow:hidden;」を使用し、ホバー時はホバー箇所に「overflow:auto;」でwidthを指定、その他の箇所に「width:20px;」を使用して、アコーディオンのエフェクトを表現しています。

CSSオフ時には、それぞれのパネルが上から順に配置されます。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

Webnist Blog

on 2008年4月11日

[CSS]スタイルシートで実装するアコーディオンエフェクト:…

colissさんで紹介されていました
[CSS]スタイルシートで実装するアコーディオンエフェクトについて、
IE6で動作しなかったので、header部分にGoogle (more…)

コリス

on 2008年4月11日

スタイルシートで実装するアコーディオンエフェクト:IE6対応の縦書きって、いいですね。

表示されている箇所と隠されている箇所で、遊べそうだと思いました。

[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応 | WebnistのCSS

on 2010年2月11日

[...] colissさんで紹介されていました [CSS]スタイルシートで実装するアコーディオンエフェクトについて、 IE6で動作しなかったので、header部分にGoogle コードを追加し、 動作するようにし [...]

top of page

©2011 coliss