三级树形竖向收缩列表菜单_菜单导航特效

三级竖向排列的导航菜单，树形，鼠标点击后收缩/展开，在一些产品类网站经常可以看到，美观大方，可以无穷扩展下往，只要你有足够的内容项。不管你现在能不能用上，都是很值得收躲一下的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
<title>三级树形竖向收缩菜单</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<style>
a{color: #000000;text-decoration: none;}
a:hover{color: #ff0000;text-decoration: underline;}
body{font-size:12px;}
.p{margin-left:10px;}
.ps{margin-left:10px;display:none;}
.pss{margin-left:10px;display:block;}
.t{cursor:pointer;background:url(http://p1.mb5u.com/texiao/0/20100522230751255.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.f{cursor:pointer;background:url(http://p1.mb5u.com/texiao/0/20100522230751256.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.b{cursor:pointer;background:url(http://p1.mb5u.com/texiao/0/20100522230751257.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.fblod{font-weight:bold;}
.padtb8{padding:8px 0;}
.fontred{color:#f00;}
</style>
</head>

<div class="padtb8">
	<div class="f fblod" id="sgc" onclick="w('gc')" style="background:url(http://p1.mb5u.com/texiao/0/20100522230751258.gif) no-repeat">
		<a target="FrameRight" href="">国产</a>(23934)</div>
	<div class="ps" id="gc" style="display:block">
		<div id="sfgc91" class="f" onclick="k('fgc91')">
			<a target="FrameRight" href="">
			北京奔驰(779)</a></div>
		<div class="ps" id="fgc91">
			<div class="b">
				<a target="FrameRight" href="">
				奔驰E级(314)</a></div>
			<div class="b">
				<a target="FrameRight" href="">
				克莱斯勒300C(99)</a></div>
			<div class="b">
				<a target="FrameRight" href="">
				JEEP(50)</a></div>
		</div>
		<div id="sfgc93" class="f" onclick="k('fgc93')">
			<a target="FrameRight" href="">
			北京现代(1274)</a></div>
		<div class="ps" id="fgc93">
			<div class="b">
				<a target="FrameRight" href="">
				SONATA御翔(203)</a></div>
			<div class="b">
				<a target="FrameRight" href="">
				伊兰特(545)</a></div>
		</div>
		<div id="sfgc94" class="f" onclick="k('fgc94')">
			<a target="FrameRight" href="">
			比亚迪(319)</a></div>
		<div class="ps" id="fgc94">
			<div class="b">
				<a target="FrameRight" href="">
				F3(221)</a></div>
			<div class="b">
				<a target="FrameRight" href="">
				F6(60)</a></div>
		</div>		</div>
	</div>
</div>
<script language="javascript" type="text/javascript">
function w(vd)
{
  var ob=document.getElementById(vd);
  if(ob.style.display=="block" || ob.style.display=="")
  {
     ob.style.display="none";
     var ob2=document.getElementById('s'+vd);
     ob2.style.backgroundImage="url(http://p1.mb5u.com/texiao/0/20100522230751256.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(http://p1.mb5u.com/texiao/0/20100522230751255.gif)";
  }
}
function k(vd)
{
  var ob=document.getElementById(vd);  
  if(ob.style.display=="block")
  {
     ob.style.display="none";
     var ob2=document.getElementById('s'+vd);
     ob2.style.backgroundImage="url(http://p1.mb5u.com/texiao/0/20100522230751256.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(http://p1.mb5u.com/texiao/0/20100522230751255.gif)";
  }
}
</script>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

三级树形竖向收缩列表菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些