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

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

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

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

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

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

sponsors

top of page

©2018 coliss