【CSS】CSS3のみでクリック開閉メニューを作る
twitterのUIまた変わりましたか？
もうなにがなんだか……。
まあそれはいいんですが、マウスオーバーでプルダウンメニューが出るというのはCSSのみで説明しているサイト割とあると思うんですけど、
クリックで開いてクリックで閉じるほうが実装として好きなんですよね。
と言う感じです。
こういう感じのを目指します。
今回のHTMLはこんな感じ。
[html]
<div class="pulldown">
<label>ここをクリック
<input type="checkbox">
<ul>
<li><a href="#"><img src="001.png"> ほえほえ～</a></li>
<li><a href="#">1111111</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">3333333</a></li>
<li><a href="#">4444444<br>5555555</a></li>
</ul>
</label>
</div>
[/html]
JavaScriptは使いませんので、読み込むライブラリは何もなし。
pulldownクラスのみで中は特にIDもクラスも振っていないのは、
小分けしてやるほうが見通しはいいんですけど、
プルダウンって単語自体がバッティングしそうだなあと思ったので、セレクタ全開で対応しました。
なもんでCSSのソースがくそみたいなことになりましたがどうぞ。
[css]
.pulldown
{
border:1px solid #ccc;
width:300px;
position:relative;
height:60px;
line-height:40px;
}
.pulldown > label
{
display:block;
padding:10px;
cursor:pointer;
}
.pulldown > label > input
{
display:none;
}
.pulldown > label > input + ul
{
position:absolute;
top:70px;
left:-1px;
display:block;
height:0;
margin:0;
padding:0;
list-style:none;
border:0px solid #ccc;
-webkit-transition:height .1s linear,border-width .1s linear;
-moz-transition:height .1s linear,border-width .1s linear;
-o-transition:height .1s linear,border-width .1s linear;
transition:height .1s linear,border-width .1s linear;
}
.pulldown > label > input:checked + ul
{
height:auto;
border-width:1px;
}
.pulldown > label > input + ul:before,
.pulldown > label > input + ul:after
{
content:" ";
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 0px solid #ccc;
position:absolute;
}
.pulldown > label > input + ul:before
{
top:-20px;
left:-1px;
}
.pulldown > label > input + ul:after
{
top:-19px;
left:-1px;
border-bottom: 0px solid #fff;
}
.pulldown > label > input:checked + ul:before,
.pulldown > label > input:checked + ul:after
{
border-bottom-width:10px;
}
.pulldown > label > input + ul > li
{
height:0;
line-height:16px;
font-size:16px;
overflow:hidden;
border-bottom:1px none #ccc;
-webkit-transition:height .1s linear;
-moz-transition:height .1s linear;
-o-transition:height .1s linear;
transition:height .1s linear;
background-color:#fff;
}
.pulldown > label > input + ul > li:last-child
{
border-bottom-width:0;
}
.pulldown > label > input:checked + ul > li
{
height:auto;
border-bottom-style:solid;
}
.pulldown > label > input + ul > li > a
{
display:block;
overflow:hidden;
width:150px;
padding:5px;
text-decoration:none;
color:#333;
}
.pulldown > label > input + ul > li img
{
vertical-align:middle;
}
[/css]
pulldownクラス自体の高さとかはあまり関係ないです。
ここで必要なのは、:checked擬似要素で、
コレが使えるinput[type=checkbox]タグを利用して各タグにCSSを割り当てています。
ラジオボタンでもいいんですけど、そうすると1回チェック入れちゃうと閉められないので(2つ用意して閉めるボタンと開けるボタンは可能でしょうが)、チェックボックスにしました。
あとCSSアニメーションも別に必要なければ取っ払っても動きますし、じゃあ何で入れたのかって言われたらなんかこうぐいーんって感じにしたかっただけです。
ただ、最初LIタグに高さを指定していたんですが、全体的にautoにしておいたほうが、複数行や高さまちまちでも対応できるので変更したせいで、
ULの要素の高さが開いてみないと確定しないため、アニメーションがちょっとぎこちないかもしれないです。
まあ気になるようでしたら各要素高さ決めうちにしてしまえばもうちっと滑らかになります。
三角形はULの:before:after擬似要素で作ってます。
三角形の作り方自体は適当に検索すれば出るので割愛で。
噴出しにするときは色違いの三角形をボーダーの幅分だけずらすだけです。
動作確認したい方はこちらどうぞ。
なお動作確認はWindowsのChrome,FF,IEでしか見てません。
横のMacの電源を入れるのがめんどくさいので！
