标签：
竖向二级导航菜单特效的实现:
在网页设计中，导航菜单的应用非常频繁，横向二级导航菜单的应用可能会多一些，垂直导航菜单可能稍稍少一些，当然这是相对而言的，竖向二级导航菜单的使用也是非常的频繁的，下面就简单介绍一下如何实现此功能，咱们这里只是介绍如何实现，关于美化方面不是重点，先看一段代码实例:
<!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/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5047417.html
