javascript鼠标滑过显示二级菜单特效
本文实例为大家分享了javascript鼠标滑过显示二级菜单效果，供大家参考，具体内容如下
1.关键代码：使用switch或if判断语句，改变对应的二级菜单显示方式为block或none
functionselectTabMenu(i){
switch(i){
case71:
document.getElementById("TabMenuCon71").style.display="block";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
...
}
}
2.主导航绑定事件
<ulclass="nav">
<li><ahref="#"onmouseover="selectTabMenu(71)">首页</a></li>
3.二级菜单
<ulid="TabMenuCon71"class="TabMenuCon"> <li><ahref="#">公告</a></li> <li><<ahref="#">信息</a></li> </ul>
4.完整代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>水平导航-二级菜单</title>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}
.navBar{
height:30px;
background-color:#2B383E;
text-align:center;
}
ul{
list-style:none;
}
.navli{
float:left;
}
.navlia{
display:block;
padding:020px;
height:30px;
line-height:30px;
text-decoration:none;
color:#fff;
}
.navlia:hover{
background-color:#fff;
color:#4DB6E7
}
.TabMenuCon{
clear:both;
display:none;
}
.TabMenuConli{
display:inline-block;
}
</style>
<scripttype="text/javascript">
functionselectTabMenu(i){
switch(i){
case71:
document.getElementById("TabMenuCon71").style.display="block";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case72:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="block";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case73:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="block";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case74:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="block";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case75:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="block";
document.getElementById("TabMenuCon76").style.display="none";
break;
case76:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="block";
break;
}
}
</script>
</head>
<body>
<divclass="navBar">
<ulclass="nav">
<li><ahref="#"onmouseover="selectTabMenu(71)">首页</a></li>
<li><ahref="#"onmouseover="selectTabMenu(72)">关于协会</a></li>
<li><ahref="#"onmouseover="selectTabMenu(73)">协会动态</a></li>
<li><ahref="#"onmouseover="selectTabMenu(74)">协会活动</a></li>
<li><ahref="#"onmouseover="selectTabMenu(75)">会员</a></li>
<li><ahref="#"onmouseover="selectTabMenu(76)">资源空间</a></li>
</ul>
</div>
<divid="TabMenuCon">
<ulid="TabMenuCon71"class="TabMenuCon">
<li><ahref="#">公告</a></li>
<li><<ahref="#">信息</a></li>
</ul>
<ulid="TabMenuCon72"class="TabMenuCon">
<li>协会简介</li>
<li>组织机构</li>
<li>协会章程</li>
</ul>
<ulid="TabMenuCon73"class="TabMenuCon">
<li>协会新闻</li>
<li>活动预告</li>
<li>求职招聘</li>
</ul>
<ulid="TabMenuCon74"class="TabMenuCon">
<li>义务维修月</li>
<li>平面设计活动</li>
<li>程序设计活动</li>
<li>户外拓展</li>
</ul>
<ulid="TabMenuCon75"class="TabMenuCon">
<li>会员登录</li>
<li>会员注册</li>
<li>缴纳会费</li>
<li>会员信息管理</li>
<li>修改密码</li>
</ul>
<ulid="TabMenuCon76"class="TabMenuCon">
<li>PS教程</li>
<li>前端设计</li>
<li>Flash教程</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。