「ドロップダウン」タグアーカイブ

Ajax他, スマホ・パソコン・Web関連

CSSで、子も孫も横並びのドロップダウンメニュー

コメントする

ドロップダウンメニューというか、プルダウンメニューというか…
下層の表示が縦並びになっているものしかない。
jQueryを使うものだとあるのだが、あえてCSSのみでやりたい時のために作ってみた。
———————————————————
ソース

<div id=”menu”><!– menu start –>
<ul id=”pulldown-menu”>
<li><a href=”index.html”><span>Home</span></a></li>
<li><a href=”#” class=”drop”><span>会社紹介</span></a>
<ul class=”about”>
<li><a href=”ceo.html”>CEO挨拶</a></li>
<li><a href=”partner.html”>パートナーシップ</a></li>
<li><a href=”map.html”>アクセス地図</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>事業紹介</span></a>
<ul class=”business”>
<li><a href=”area.html”>事業領域</a></li>
<li><a href=”smartgrid.html”>スマートグリッド</a></li>
<li><a href=”ess.html”>電力貯蔵装置</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>製品紹介</span></a>
<ul class=”product”>
<li><a href=”#” class=”drop”>新再生エネルギー</a>
<ul class=”nre”>
<li><a href=”sun.html”>太陽電池モジュール</a></li>
</ul></li>
<li><a href=”led.html”>LED</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”><span>プロジェクト</span></a>
<ul class=”project”>
<li><a href=”#” class=”drop”>国内</a>
<ul class=”domestic”>
<li><a href=”island.html”>カパ島</a></li>
</ul>
</li>
<li><a href=”#” class=”drop”>海外</a>
<ul class=”oversea”>
<li><a href=”aus.html”>オーストラリア</a></li>
<li><a href=”thai.html”>タイ</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”contact.html”><span>お問い合わせ</span></a></li>
</ul>

</div><!– menu end –>

———————————————————————-
CSS
* {
margin: 0;
padding: 0;
list-style: none;
}
ul#pulldown-menu a {
color: #FFFFFF;
text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
background: #3366FF;
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
background: #3b91ff;
}

ul#pulldown-menu a.drop:link,
ul#pulldown-menu a.drop:visited {
background: #3366FF url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu a.drop:hover,
ul#pulldown-menu a.drop:active {
background: #3b91ff url(‘http://2since2006.up.seesaa.net/image/down.gif’) no-repeat;
}

ul#pulldown-menu li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li a.drop {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li a {
display: block;
width: 9em;
height: 2em;
text-align: center;
}
ul#pulldown-menu li ul li {
float: left;
position: relative;
width: 9em;
height: 2em;
line-height: 2em;
font-size: 11px;
}
ul#pulldown-menu li ul li a {
width: 9em;
height: 2em;
text-align: center;
}

ul#pulldown-menu li ul,
ul#pulldown-menu li ul li ul {
display: none;
}
ul#pulldown-menu li:hover ul {
clear: both;
width: 54em;
display: block;
position: absolute;
top: 2em;
left: 0;
z-index: 100;
}
ul#pulldown-menu li:hover ul li {
float: left;
}
* html ul#pulldown-menu li:hover ul {
vertical-align: bottom;
}

ul#pulldown-menu li:hover ul li ul {
display: none;
}

ul#pulldown-menu li ul li:hover ul {
clear: both;
float:left;
display: block;
position: absolute;
top: 0;
z-index: 200;
}

ul.about {
width: 27em;
margin-left: -9em;
}
ul.business {
width: 27em;
margin-left: -9em;
}
ul.product {
width: 18em;
}
ul.nre {
width: 9em;
margin-top: 2em;
}
ul.project {
width: 18em;
}
ul.domestic {
width: 9em;
margin-top: 2em;
}
ul.oversea {
width: 18em;
margin-top: 2em;
}

————————————————

そもそも、下層が縦にしかならない原因は、親の ul li 部分の横幅の間にしか、子や孫の ul li がこれない事。
したがって、子や孫の横幅を指定してやればこの問題は解決する。
が、下層メニューの数はそれぞれ固有なので、仕方なく個別に指定するしかなかった。したがって、汎用性は全くない。

あくまで参考程度にしかならないが、、結構困っている人がいたみたいなので、一応のTipsとして。