三级树形竖向收缩列表菜单

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

三级树形竖向收缩列表菜单

标签：树形菜单三级菜单　时间：2009-01-22　已阅读：
三级竖向排列的导航菜单，树形，鼠标点击后收缩/展开，在一些产品类网站经常可以看到，美观大方，可以无限扩展下去，只要你有足够的内容项。不管你现在能不能用上，都是很值得收藏一下的。

<!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" content="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(/jscss/demoimg/ico080426_close.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.f{cursor:pointer;background:url(/jscss/demoimg/ico080426_open.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.b{cursor:pointer;background:url(/jscss/demoimg/ico080426_dot.gif) no-repeat;line-height:20px; padding-left:20px; height:20px;}
.fblod{font-weight:bold;}
.padtb8{padding:8px 0;}
.fontred{color:#f00;}
</style>
</head>
<body bgcolor="#F6F6F6" leftmargin="0">
<div class="padtb8">
	<div class="f fblod" id="sgc" onclick="w('gc')" style="background:url() 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(/jscss/demoimg/ico080426_open.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(/jscss/demoimg/ico080426_close.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(/jscss/demoimg/ico080426_open.gif)";
  }
  else
  {
    ob.style.display="block";
    var ob2=document.getElementById('s'+vd);
    ob2.style.backgroundImage="url(/jscss/demoimg/ico080426_close.gif)";
  }
}
</script>
</body>
</html>

三级树形竖向收缩列表菜单

本类推荐代码

本类阅读排行

最新源码下载