顶一个简单的伸缩菜单-导航特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0; padding:0;} body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;} #box{width:200px; border:1px solid #ccc;} .title{ font-size:12px; padding-left:3px; height:20px; border-bottom:1px solid #fff; background:#000; line-height:20px; color:#FFF; cursor:pointer;} .content{ padding:5px; height:150px;} </style> <script type="text/javascript"> function flexMenu(id) { var $id = document.getElementById(id); var titleList = $id.getElementsByTagName('h2'); var contentList = $id.getElementsByTagName('div'); titleList[titleList.length-1].style.border = 'none'; for(var i=0;i<titleList.length;i++) { titleList[i].onclick = function() { for(var a=0;a<contentList.length;a++) { contentList[a].style.display = 'none'; } if(this.nextSibling.nodeType=='3') { this.nextSibling.nextSibling.style.display = ''; }else { this.nextSibling.style.display = ''; } } } } window.onload = function(){ flexMenu('box')} </script> <title>flex menu</title> </head> <body> 应有尽有的网页特效网址：<a href="http://js.alixixi.com">http://js.alixixi.com</a> <hr /> <div id="box"> <h2 class="title">阿里西西</h2> <div class="content" ><a href="http://www.alixixi.com">www.alixixi.com</a></div> <h2 class="title">站长工具</h2> <div class="content" style="display:none;"><a href="http://tool.alixixi.com">站长工具</a></div> <h2 class="title">网页特效</h2> <div class="content" style="display:none;"><a href="http://js.alixixi.com">站长工具</a></div> </div> </body> </html>

来源：www.ekoooo.com/所属分类：导航特效/更新时间：2009-07-16 [收藏][报错][返回列表]

顶一个简单的伸缩菜单-导航特效

导航特效Rss订阅网页特效搜索

热门导航特效