CSS3だけでアコーディオンメニューをつくる
アコーディオンメニューというと、jQueryなどのajax(javaScript)を使って実装しますが、今回はCSS3のTransitionを使ってアコーディオンの動きを実現させてみます。
CSSだけで実装できますので、ソース的にも軽量で開発者にとってはリソースも軽減できていい事ずくめッスね。
ニュィーンとのびるメニューをCSSで実装
HTMLをマークアップ
何はともあれ、HTMLでメニューを書かないことには話にならんので、以下のようにマークアップ。
<div id="accordion">
<div class="item">
<a href="#">Products</a>
<p>ここにはメニューの説明文とかを入れておけばいいでしょうね。デモの為にちょっと長めにテキストを書いてみます。</p>
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
取り上げずこんな感じで。メニュー領域をid=”accordion”で括って、メニュー単体はclass=”item”としてます。
CSSで体裁を整える
先ほどマークアップしたHTMLソースをCSSで体裁を整える。ここではまだ動きの部分は無視していいです。ついでに、HTMLの方のメニューに”Products”,”Highlight”,”News”,”Contact Us”を追加。
#accordion .item {
width: 400px;
height: 30px;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #6CF;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
こんな感じになると思います。
細かいとこは自分で調整してね
ちょっとカッコつけて、border-radiusで角丸を付けています。モダンブラウザ(Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+)ではちゃんと角丸が表現されて、それ以外のブラウザでは矩形で表示されます。
Transitionで動きを付ける
さぁ、いよいよTransitionでアコーディオンメニューの動きを付けて行きますよ。
先ほどのCSSに下記プロパティを追加します。
#accordion .item {
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
height: 180px;
}
スライド効果を得るために、transition-propertyにhightが必要です。なので、div:hoverの180pxで高さを指定しておきましょう。
transition-timing-functionでアニメートする時間（設定のよっては緩急がつけれたりするっぽい）です。
まぁ、transitionプロパティは今の所ブラウザが限定されて(Firefoxは時期3.7で実装予定)ますので、使いどころは難しいですが覚えておいてソンはなさそうですね。
CSS コード
#accordion .item {
width: 400px;
height: 30px; /* height = total height of A child element */
overflow: hidden;
transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion a {
display: block;
height: 20px;
line-height: 20px;
background: #6CF;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
text-align: left;
}
#accordion div:hover {
height: 180px; /* height = total height of A and P child elements */
}
#accordion div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
デモはコチラからどうぞ。
追記（2011/11/5）
コメントよりご指摘いただきましたので、ここに追記いたします。
こちらの記事は、http://www.deluxeblogtips.com/さまより引用。
転載の記述を忘れており、大変ご迷惑お掛け致しました。
Facebook comments:
Leave a Reply
※コメントが認証されるまで、コメントは反映されません。
4 Responses so far.
通りすがりですが
http://www.deluxeblogtips.com/2010/04/accordion-menu-css3-transition.html
と無視できないレベルで一致しているので、元記事として引用されたほうがよろしいかと｡
引用元の記載を忘れており、申し訳ございません。ご指摘ありがとうございました。