Webサイト上で今では頻繁に見かけるアコーディオンUI。
この動作は基本的にはJavaScriptやjQueryなどスクリプトを使って実装することになりますが、
CSS3アニメーションだとスクリプトを使わずにCSSのみでアコーディオンUIを実装することが可能になります。
今回はそんなアコーディオンUIをCSSのみで実装する方法を紹介してみます。
まずは動作サンプルから。
※動作環境はWebkitブラウザのSafariやChromeのみです！！！
CSS3 ACCORDION
≫アンカーリンクが効いてしまって、うまく動作が見れない場合はこちらから
各リスト（リンク）をクリックするとアコーディオン形式でコンテンツが表示されます。
クリック後、現在アクティブな状態のリストに対しては背景色等も変化させています。
内部構成について。
まずはHTMLソース。
◆HTML <dl id="contents01"> <dt><a href="#contents01">CONTENTS【01】</a></dt> <dd> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </dd> </dl> <dl id="contents02"> <dt><a href="#contents02">CONTENTS【02】</a></dt> <dd> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </dd> </dl> <dl id="contents03"> <dt><a href="#contents03">CONTENTS【03】</a></dt> <dd> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p> </dl>
全体は＜dl＞リストで構成しています。
ボタンとなる箇所は＜dt＞に、
アコーディオン動作で表示／非表示を切り替えるエリアは
＜dd＞の中に記載する要素になります。
＜dl＞はそれぞれ任意のIDを付け
そのIDに対してCSS3「:target」を使ってアコーディオン動作を実装します。
CSSの記述は以下。
◆CSS
/* AccordionArea
-------------------------- */
dl {
margin: 0 auto;
width: 500px;
text-align: left;
border-bottom: #fff 2px solid;
}
dl dt {
padding: 5px 0;
width: 495px;
text-indent: 0.5em;
background: #eee;
border-left: #777 5px solid;
}
dl dt a {
width: 100%;
height: 100%;
display: block;
}
dl dd {
height: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: height 1s;
}
dl dd p {
padding: 10px 0;
}
/* CSS3 AccordionAnimation
-------------------------- */
@-webkit-keyframes ACD-Open {
0% {height: 0;opacity: 0;}
100% {height: 150px;opacity: 1;}
}
:target dd {
-webkit-animation-name: ACD-Open;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
height: 150px;
opacity: 1;
overflow-y: auto;
}
:target dt {
background: #ffefef;
border-left: #ff0000 5px solid;
}
:target dt a {
text-decoration: none;
}
「ACD-Open」と定義したアコーディオンアニメーション動作を
「:target」となった＜dl＞の＜dd＞に対して実行させている構成になっています。
アニメーション動作を実行する前は＜dd＞の高さを「0」に設定し非表示にして
アニメーション実行時に高さを「150px」に変化させています。
（透過度も「0」から「1」へ）
「:target」をうまく利用すると、
簡単な指定のみで一般的なWeb上のUIをCSSのみで実装させることができる
便利なものになっています。
CSS3のみでアコーディオンUIが必要になった際に是非。。。