2008年04月12日
CSSのみでアコーディオンメニュー
CSSnewbleでCSSのみでアコーディオンメニューを作るという面白いアイデアが紹介されていました。特に難しいこともなく簡単な記述でアコーディオンメニューっぽいものを作ることが出来ます。実際にどのような動作をするのかはCSSnewbleでのサンプルを見るとわかると思います。今回はこれをページのレイアウトに利用した全画面バージョンを作ってみました。
使用したhtmlとCSS
<div id="accordion">
<div id="part1"><h1>div#accordion div#part1</h1><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part2"><h2>div#accordion div#part2</h2><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part3"><h3>div#accordion div#part3</h3><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part4"><h4>div#accordion div#part4</h4><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part5"><h5>div#accordion div#part5</h5><p>CSSのみでアコーディオンメニュー</p></div>
</div>html,body {
height:100%;
margin: 0;
padding: 0;
}
#accordion {
height: 100%;
}
#accordion div {
float:left;
height: 100%;
width: 20%;
overflow: hidden;
}
#accordion:hover div {
width: 5%;
}
#accordion:hover div:hover {
width: 80%;
overflow: auto;
}
通常レイアウトとして全体を5つのdivで分けるので#accordionのwidthで設定している数値（今回は100%）を5分割した20%を#accordion以下のdiv要素全てに設定しておきます。#accordion:hover divで5つのdiv#accordionにマウスが乗った場合5つのdiv要素全てを5%に縮める設定にします。さらに#accordion:hover div:hoverで現在マウスが乗っているdiv要素の大きさを80%に広げます。
hoverの中のhover要素をフォーカスするところがこのアイデアの面白いところだと思います。
この場合の5%や20%は好きな大きさでかまいません。ただしそれぞれを足した数値の合計が#accordion で設定しているwidthと同じ大きさになるようにしないといけません。
注意点としては腐れブラウザであるIE6君は:hoverがaタグ以外対応していませんので、IE6に対応させたい場合はこちらのエントリー（IEでhoverをa以外に効かせる）を参照してください。