你的位置:首页 > Java教程

[Java教程]竖向二级导航菜单特效的实现


竖向二级导航菜单特效的实现:
在网页设计中,导航菜单的应用非常频繁,横向二级导航菜单的应用可能会多一些,垂直导航菜单可能稍稍少一些,当然这是相对而言的,竖向二级导航菜单的使用也是非常的频繁的,下面就简单介绍一下如何实现此功能,咱们这里只是介绍如何实现,关于美化方面不是重点,先看一段代码实例:

 

<!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/