CSSで作ろうプルダウンメニュープルダウンメニューというと、javascriptで作ったりもしますが
今回はスタイルシートでそれを実現してみようと思います。
↓サンプルはこちら
<div id="pulldown">
<ul>
<li><a href="#">menu1</a>
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">かきくけこ</a></li>
<li><a href="#">さしすせそ</a></li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul>
<li><a href="#">たちつてと</a></li>
<li><a href="#">なにぬねの</a>
<ul>
<li><a href="#">入れ子にすることで</a></li>
<li><a href="#">何層にもすることができます</a>
<ul>
<li><a href="#">まだまだ</a></li>
<li><a href="#">続くよ</a></li>
<li><a href="#">どこまでも</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul>
<li><a href="#">はひふへほ</a></li>
<li><a href="#">まみむめも</a></li>
<li><a href="#">やゆよ</a></li>
<li><a href="#">わおん</a></li>
</ul>
</li>
</ul>
</div>
･･･んー･･･何かうにゃうにゃして見えるなぁ；
#pulldown ul {
list-style: none;
margin: 0;
padding: 0;
}
#pulldown li {
float: left;
min-width: 150px;
white-space: nowrap;
background:#ECA2CC;
display: block;
border-left:2px solid white;
text-align:center;
}
#pulldown ul ul {
display: none;
position: absolute;
z-index: 10;
}
#pulldown li li {
clear: left;
position:relative;
width: 100%;
background:#f7f7f7;
border-bottom:1px solid #cccccc;
margin:0px 0px 0px -2px;
text-align:left;
}
#pulldown li li a{
clear: left;
position:relative;
width: 100%;
display: block;
}
#pulldown li li a:hover{
clear: left;
position:relative;
width: 100%;
background:#DAE6CC;
display: block;
text-decoration:none;
}
#pulldown ul ul ul {
top: 0;
left: 100%;
}
#pulldown ul li:hover > ul {
display: block;
}
これがサンプルのプルダウンメニューで使っているコードです。
1段目は横並びのメニューリスト。
2段目以降にプルダウンで表示したい項目を入れ子にしていきます。
どんどん入れ子にしていけば「menu2」のようにどこまでもどこまでも続いていきます。
･･･ここまで階層が深くなることもほとんどないと思うけど。
z-index: 10;
プルダウンメニューにページの内容が重なったとき、プルダウンのほうが前面に表示されるようにします。
たぶん1以上であれば問題ないと思いますが、ここはお好きな数字にしてもいいんじゃないでしょうか。
#pulldown ul li:hover > ul {
display: block;
この部分で入れ子になってる部分がある場合、すぐ下のulを表示するようにします。
これがないと各メニューにカーソルを合わせても、何も表示してくれません。
メニュー部分に画像を入れてもいいですし、
入れ子にしたリストにアイコンをつけても見栄えは全然違ってきます。
お好きなようにいじって、ぜひお試しください♪
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。
