您的位置：首页 > 其它

使用if…else语句做导航下拉菜单

2012-03-09 16:10 411 查看
页面css样式
<style type="text/css">
<!--
body, td, th {font-size: 12px;margin:30px;padding:0;}
a {color:#000000;text-decoration:none;}
a:hover {color:#FF0000;}
ul, li {margin:0;padding:0;}
ul, li {list-style:none;}
.nav {width:600px;height:30px;line-height:30px;background:#999933;margin:0 auto;}
.nav ul {margin-left:50px;position:absolute;}
.nav ul li {float:left;display:block;width:100px;text-align:center;background:#CCCC99;font-size:13px;margin-right:2px;height:30px;line-height:30px;
position:relative;}
.subnav {width:100px;position:absolute;top:30px;left:-50px;z-index:-1; border:1px solid #666633;}
-->
</style>

// js判断语句，写在<head></head>之间！
<script language="javascript" type="text/javascript">
var $ = function(id){return document.getElementById(id)}
function menu(i)
{
if(i==0)
{
$('menuList0').style.display='block';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==1)
{
$('menuList0').style.display='none';
$('menuList1').style.display='block';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==2)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='block';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==3)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='block';
$('menuList4').style.display='none';
}
else if(i==4)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='block';
}
else
{
alert("输入错误!");
}
}
</script>


导航菜单结构
<div class="nav">
<ul>
<li onmouseover="menu(0)">
<ul class="subnav" id="menuList0" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单一</a> </li>
<li onmouseover="menu(1)">
<ul class="subnav" id="menuList1" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单二</a> </li>
<li onmouseover="menu(2)">
<ul class="subnav" id="menuList2" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单三</a> </li>
<li onmouseover="menu(3)">
<ul class="subnav" id="menuList3" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单四</a> </li>
<li onmouseover="menu(4)">
<ul class="subnav" id="menuList4" style="display:none">
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单五</a> </li>
</ul>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航