三級樹形豎向收縮列表菜單_菜單導航特效

三級豎向排列的導航菜單，樹形，鼠標點擊后收縮/展開，在一些產品類網站經常可以看到，美觀大方，可以無窮擴展下往，只要你有足夠的內容項。不管你現在能不能用上，都是很值得收躲一下的。

<!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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些