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

2024-09-05 12:19:16

字体：大中小

来源：转载

供稿：网友

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

<!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">		国产(23934)</div>	<div class="ps" id="gc" style="display:block">		<div id="sfgc91" class="f" onclick="k('fgc91')">						北京奔驰(779)</div>		<div class="ps" id="fgc91">			<div class="b">								奔驰E级(314)</div>			<div class="b">								克莱斯勒300C(99)</div>			<div class="b">								JEEP(50)</div>		</div>		<div id="sfgc93" class="f" onclick="k('fgc93')">						北京现代(1274)</div>		<div class="ps" id="fgc93">			<div class="b">								SONATA御翔(203)</div>			<div class="b">								伊兰特(545)</div>		</div>		<div id="sfgc94" class="f" onclick="k('fgc94')">						比亚迪(319)</div>		<div class="ps" id="fgc94">			<div class="b">								F3(221)</div>			<div class="b">								F6(60)</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>

上一篇：带箭头指向的首页滑动门特效代码

下一篇：兼容性好的TAB选项卡