竖向二级导航菜单特效的实现:
在网页设计中，导航菜单的应用非常频繁，横向二级导航菜单的应用可能会多一些，垂直导航菜单可能稍稍少一些，当然这是相对而言的，竖向二级导航菜单的使用也是非常的频繁的，下面就简单介绍一下如何实现此功能，咱们这里只是介绍如何实现，关于美化方面不是重点，先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{
font-size:12px;
margin-left:200px;
}
ul,li{
list-style:none;
margin:0px;
padding:0px;
}
#main #nav .single{width:150px;}
#main #nav .single a{
display:block;
width:150px;
height:30px;
line-height:30px;
text-align:center;
background-color:green;
border-top:1px solid #999;
text-decoration:none;
color:black;
}
#main #nav .single ul li{
height:30px;
line-height:30px;
text-align:center;
background-color:blue;
}
#main #nav .single ul{
display:none;
}
#main #nav .single ul a{
color:red;
background-color:blue;
}
</style>
<script type="text/javascript">
function GetCurrentStyle(obj, prop){
if(obj.currentStyle){
return obj.currentStyle[prop];
}
else if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[prop];
}
return null;
}
function mynav(el){
if(GetCurrentStyle(el.getElementsByTagName("ul")[0],"display")=="none"){
el.getElementsByTagName("ul")[0].style.display="block";
}
else{
el.getElementsByTagName("ul")[0].style.display="none";
}
}
</script>
</head>
<body>
<div id="main">
<ul id="nav">
<li class="single">
<a href="#">搜索优化</a>
<ul>
<li><a href="#">SEO技巧</a></li>
<li><a href="#">站长交流</a></li>
</ul>
</li>
<li class="single">
<a href="#">前台专区</a>
<ul>
<li><a href="#">JQUERY教程</a></li>
<li><a href="#">div+css教程</a></li>
</ul>
</li>
<li class="single">
<a href="#">后台专区</a>
<ul>
<li><a href="#">ASP专区</a></li>
<li><a href="#">.net教程</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
以上代码实现了竖向二级导航菜单效果，当然这里比较简陋，可以根据实际需要再进行美化，下面就简单介绍一下如何实现此效果:
一.实现原理:
为作为导航的li元素绑定onclick事件处理函数，此函数可以判断当前li元素中作为二级导航的ul元素的display属性是否是"block"，如果是则设置为"none"，否则设置为"display"。
二.代码注释:
1.关于GetCurrentStyle()函数可以参阅js如何获取非内部取样式表中定义的属性值一章节。
2.if(GetCurrentStyle(el.getElementsByTagName("ul")[0],"display")=="none")判断当前ul元素的display属性值是否为"none"，是则将它的display属性值设置为"block"。语句中的el.getElementsByTagName("ul")[0]可以获取当前li元素中ul元素集合中第一个ul元素。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=6373
更多内容可以参阅 ：http://www.softwhy.com/javascript/
时间： 2024-10-11 18:13:29