三級樹形豎向收縮列表菜單

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   id="dd99ptr"   class="padtb8">	<div   id="9l9ztzx"   class="f fblod" id="sgc" onclick="w('gc')" style="background:url() no-repeat">		國產(23934)</div>	<div   id="xlthftr"   class="ps" id="gc" style="display:block">		<div   class="p3rvvrp"   id="sfgc91" class="f" onclick="k('fgc91')">						北京奔馳(779)</div>		<div   id="dvdr9zx"   class="ps" id="fgc91">			<div   id="fjzdtzn"   class="b">								奔馳E級(314)</div>			<div   id="lhhd9f3"   class="b">								克萊斯勒300C(99)</div>			<div   id="9v95xbh"   class="b">								JEEP(50)</div>		</div>		<div   class="nd3dpdb"   id="sfgc93" class="f" onclick="k('fgc93')">						北京現代(1274)</div>		<div   id="trznbh9"   class="ps" id="fgc93">			<div   id="h3bx9fr"   class="b">								SONATA御翔(203)</div>			<div   id="nn3b9xf"   class="b">								伊蘭特(545)</div>		</div>		<div   class="pxpxpfp"   id="sfgc94" class="f" onclick="k('fgc94')">						比亞迪(319)</div>		<div   id="rbnvdr7"   class="ps" id="fgc94">			<div   id="9p9hxlt"   class="b">								F3(221)</div>			<div   id="13bbdv1"   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選項卡