□浮生蕭條□

网站(-=网站设计，相关素材，ASP,JSP,CSS,MY-SQL,PHP=-)

树型菜单（二）

网站 2005-10-12 11:0

十分优秀的一种树型菜单，可以说是精点之作。一豪在工作用就使用这个树型菜单，这里推荐给大家。

页面：点这儿参观
制作方法
将下面的代码复制到<head>~</head>里

<script language="JavaScript1.2">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
if (ver4) 
{    
	with (document) 
	{        
		write("<STYLE TYPE='text/css'>");
		if (NS4) 
		{            
			write(".parent {position:absolute; visibility:visible}");            
			write(".child {position:absolute; visibility:visible}");            
			write(".regular {position:absolute; visibility:visible}") 
			write(".four{position:absolute; visibility:visible}") 
			write(".five{position:absolute; visibility:visible}")             
		}        
		else 
		{            
			write(".child {display:none}") 
			write(".regular {display:none}") 
			write(".four{display:none}") 
			write(".five{display:none}")           
		}        
		write("</STYLE>");    
	}
}

function swapimage(img_url)
{
	if (document.images) 
	{
		imgs=new image();
		imgs.src=img_url
	}
}

function initIt()
{    
	if (!ver4) return;    
	if (NS4) 
	{        
		for (i=0; i<document.layers.length; i++) 
		{            
			whichEl = document.layers[i];            
			if (whichEl.id.indexOf("Child") != -1||whichEl.id.indexOf("regular") != -1||whichEl.id.indexOf("four") != -1||whichEl.id.indexOf("five") != -1) whichEl.visibility = "hide";       
		}        
		arrange();    
	}    
	else 
	{        
		divColl = document.all.tags("DIV");        
		for (i=0; i<divColl.length; i++) 
		{            
			whichEl = divColl(i);            
			if (whichEl.className == "child"||whichEl.className == "regular"||whichEl.className == "four"||whichEl.className == "five") 
				whichEl.style.display = "none";        
		}    
	}
}
plus = new Array ();
plus[0] = new Image(); plus[0].src = "plus1.gif";
plus[1] = new Image(); plus[1].src = "plus2.gif";
plus[2] = new Image(); plus[2].src = "plus3.gif";
plus[3] = new Image(); plus[3].src = "plus4.gif";
plus[4] = new Image(); plus[4].src = "plus5.gif";
minus = new Array ();
minus[0] = new Image(); minus[0].src = "minus1.gif";
minus[1] = new Image(); minus[1].src = "minus2.gif";
minus[2] = new Image(); minus[2].src = "minus3.gif";
minus[3] = new Image(); minus[3].src = "minus4.gif";
minus[4] = new Image(); minus[4].src = "minus5.gif";
function expandIt(name,order,serial,num) 
{	
	if (!ver4) return;    
	if (IE4) 
	{

whichEl = eval([name] + [order]);		
		if (whichEl.style.display == "none") 
		{            
			whichEl.style.display = "block"; 			
		}        
		else 
		{            
			whichEl.style.display = "none";        
		}    
		whichEl = eval([name] + [order]+ "_" +[serial]);					
		if (whichEl.src.indexOf("plus") >= 0) {
			
			whichEl.src = minus[num].src
			}
		else {
			whichEl.src = plus[num].src
		}
	}    
	else 
	{        
		whichEl = eval("document." + [name] + [order]);		
		     
		if (whichEl.visibility == "hide") 
		{            
			whichEl.visibility = "show";        
		}        
		else 
		{            
			whichEl.visibility = "hide";        
		}        
		
	}
}
onload = initIt;
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将下面的<table>代码复制到<body>~</body>里

<div id='KB1Parent' class='parent'> 
	<a href="#"><img id='KB1Child_1' src='plus1.gif' border=0 hspace="4" onClick="expandIt('KB1','Child',1,0); return false;">渠道管理</a>
</div>
<div id='KB1Child' class='child'>
	<a href="#"><img id='KB1regular_1' src='plus2.gif' border=0 hspace="4" onClick="expandIt('KB1','regular',1,1); return false;">网络管理</a><br>
	<div id='KB1regular' class='regular'>
		<a href="#"><img id='KB1four_1'src='plus3.gif' border=0 hspace="4" onClick="expandIt('KB1','four',1,2); return false;">华北区</a><br>
		<div id='KB1four' class='four'>
			<a href="#"><img id='KB1five_1' src='plus4.gif' border=0 hspace="4" onClick="expandIt('KB1','five',1,3); return false;"  >北京市</a><br>
			<div id='KB1five' class='five'>
				<a href="#"><img src='document4.gif' border=0 hspace="4" >朝阳区</a><br>
				<a href="#"><img src='document4.gif' border=0 hspace="4" >海淀区</a><br>
			</div>
			<a href="#"><img src='document3.gif' border=0 hspace="4" >天津市</a><br>
			<a href="#"><img src='document3.gif' border=0 hspace="4" >石家庄市</a><br>
		</div>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >华南区</a><br>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >华东区</a><br>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >西北区</a><br>
	</div>
	<a href="#"><img src='document1.gif' border=0 hspace="4" >树状结构</a><br>
</div>
<div id='KB2Parent' class='parent'>
	<a href="#"><img id='KB2Child_1' src='plus1.gif' border=0 hspace="4" onClick="expandIt('KB2','Child',1,0); return false;">客户管理</a>
</div>
<div id='KB2Child' class='child'>
	<a href="#"><img id='KB2_1regular_1' src='plus2.gif' border=0 hspace="4" onClick="expandIt('KB2_1','regular',1,1); return false;">类别设置</a><br>
	<div id='KB2_1regular' class='regular'>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >直运直汇</a><br>
		<a href="#"><img  id='KB2_1_1four_1' src='plus3.gif' border=0 hspace="4" onClick="expandIt('KB2_1_1','four',1,2); return false;">经销商</a><br>
		<div id='KB2_1_1four' class='four'>
			<a href="#" ><img src='document3.gif' border=0 hspace="4" >二批商</a><br>
			<a href="#" ><img src='document3.gif' border=0 hspace="4" >三批商</a><br>
		</div>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >超市客户</a><br>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >零售点</a><br>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >集团客户</a><br>
		<a href="#"><img src='document2.gif' border=0 hspace="4" >消费者</a><br>
	</div>
	<a href="#"><img src='document1.gif' border=0 hspace="4" >客户信息</a><br>
	<a href="#"><img src='document1.gif' border=0 hspace="4" >信用管理</a><br>
</div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分解说明：

1、此树型菜单最主要的部分是要定义好每一个分类及分类下面的二级、三级菜单的ID值及class、onClick的定义
　只要定义好了这些，保证唯一性就能制作成功。此效果由于分析十分麻烦，但只要制作细心一点就没事了。
　所以在此不做详细的讲解了。

标签集:TAGS:

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}

{commentcontent}