js实现下拉菜单伸缩弹出分类列表显示特效

很酷的伸缩导航菜单特效,当用户点击标题后向下弹出下拉选项,模拟QQ分组点击弹出效果。

<!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=gb2312" />
<title>中国沃柑看武鸣,广西农产品供求信息,www.64pc.com</title>
<meta name="keywords" content="沃柑,武鸣沃柑,中国沃柑看武鸣,农产品信息,农业资讯,农产品供求信息,广西农产品供求信息,www.64pc.com" />
<meta name="description" content="www.64pc.com,武鸣,沃柑之乡,中国沃柑看武鸣,本站有广西武鸣地区大量一手农产品供求信息,服务于广大武鸣老乡农民朋友,我爱你,我的家乡!各位呗哝需要发布农产品供求信息外嘀抖!" />
<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)
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
 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++)
 {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
  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>中国沃柑看武鸣,广西农产品供求信息,www.64pc.com</title>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<a href="http://www.64pc.com">中国沃柑看武鸣</a>。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,305686263@qq.com,用.net打造靓站。中国沃柑看武鸣,www.64pc.com-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>
<div id="box">
 <h2 class="title">站长特效</h2>
    <div class="content" ><a href="http://zzjs.net/">站长特效频道子菜单</a></div>
    <h2 class="title">网页特效</h2>
    <div class="content" style="display:none;"><a href="http://zzjs.net/">网页特效子菜单</a></div>
    <h2 class="title">广告代码</h2>
    <div class="content" style="display:none;"><a href="http://zzjs.net/">广告代码子菜单</a></div>
</div>
</body>
</html>


本文作者:大陆

本文链接:http://www.zzjs.net/post/765.html

特别赞助:中国沃柑看武鸣 武鸣沃柑 广西农产品供求信息

上一篇:js代码制作下拉菜单弹性缓冲效果

发表评论