[CSS]スタイルシートで実装するアコーディオンエフェクト
CSSnewbieのエントリーから、スクリプトを使用しないで、スタイルシートで実装するアコーディオンエフェクトを紹介します。
The CSS-Only Accordion Effect
デモ：アコーディオン横タイプ
デモ：アコーディオン縦タイプ
それぞれのパネルはdivで囲まれており、通常時は「overflow:hidden;」を使用し、ホバー時はホバー箇所に「overflow:auto;」でwidthを指定、その他の箇所に「width:20px;」を使用して、アコーディオンのエフェクトを表現しています。
CSSオフ時には、それぞれのパネルが上から順に配置されます。
Post on:2008年4月11日
Comments
Webnist Blog
on 2008年4月11日
[CSS]スタイルシートで実装するアコーディオンエフェクト:…
colissさんで紹介されていました
[CSS]スタイルシートで実装するアコーディオンエフェクトについて、
IE６で動作しなかったので、header部分にGoogle (more…)
コリス
on 2008年4月11日
スタイルシートで実装するアコーディオンエフェクト:IE6対応の縦書きって、いいですね。
表示されている箇所と隠されている箇所で、遊べそうだと思いました。
[CSS]スタイルシートで実装するアコーディオンエフェクト:IE6対応 | WebnistのCSS
on 2010年2月11日
[...] colissさんで紹介されていました ［CSS］スタイルシートで実装するアコーディオンエフェクトについて、 IE６で動作しなかったので、header部分にGoogle コードを追加し、 動作するようにし [...]