ドロップダウンメニュー

（つくば：カエル）

2008年03月31日

at 18:57
posted by @
comments(2)

ドロップダウンメニュー

ドロップダウンメニューとの闘いの結果でサンプルを作りました！
IE6以外のブラウザはCSSで、
IE6は「:hover」がa要素以外に使えないので、JavaScriptで実装してます。

【縦メニュー】

【HTML】

<ul id="menu_container">
<li class="menu"><a href="#">メニュー1</a><ul>
<li><a href="#">メニュー1_1</a></li>
<li><a href="#">メニュー1_2</a></li>
<li><a href="#">メニュー1_3</a></li>
</ul></li>
<li class="menu"><a href="#">メニュー2</a><ul>
<li><a href="#">メニュー2_1</a></li>
<li><a href="#">メニュー2_2</a></li>
<li><a href="#">メニュー2_3</a></li>
</ul></li>
<li class="menu"><a href="#">メニュー3</a><ul>
<li><a href="#">メニュー3_1</a></li>
<li><a href="#">メニュー3_2</a></li>
<li><a href="#">メニュー3_3</a></li>
</ul></li>
</ul><script type="text/javascript" src="menu.js"></script>

【CSS】

#menu_container {
width: 250px;
}
#menu_container li {
margin-bottom: 1px;
border: 1px solid #009BCA;
border-left-width: 5px;
position: relative;
text-align: left;
}
#menu_container li a {
padding: 5px;
display: block;
width: 234px;
}
#menu_container li a:link, #menu_container li a:visited {
background: #FFF;
}
#menu_container li a:active, #menu_container li a:hover {
color: #FFF;
background: #009BCA;
}
#menu_container ul {
padding-left: 1px;
position: absolute;
top: -1px;
left: 245px;
display: none;
width: 250px;
}
* html #menu_container ul {
top: 0;
}
#menu_container ul li {
position: static;
}
#menu_container li:hover ul {
display: block;
}

【JavaScript】

if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){
var obj = document.getElementById("menu_container");
for(var i=0;i<obj.childNodes.length;i++)
{
if(obj.childNodes[i].className=="menu")
{
obj.childNodes[i].onmouseover = function(){pull(this)};
obj.childNodes[i].onmouseout = function(){pull(this)};
}
}
}
function pull(obj){
for(var i=0;i<obj.childNodes.length;i++)
if(obj.childNodes[i].nodeName.toUpperCase()=="UL")
obj.childNodes[i].style.display=obj.childNodes[i].style.display=="block"?"none":"block";
}