怎样才能在网页中实现树形菜单效果？

200eboy 2002-02-04 12:48:40

怎样才能在网页中实现树形菜单效果？就如CSDN论坛的样子？

...全文

195 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

200eboy 2002-02-04

打赏
举报

joxin(解脱)
请问，我用框架的时候怎么超链接呀？

joxin 2002-02-04

打赏
举报

给你源代码：
要完成此效果需要两个步骤

第一步：把如下代码加入到<head>区域中

<STYLE type=text/css>.classFrRi82 {
WIDTH: 155px; CLIP: rect(0px 155px 330px 0px); POSITION: absolute; HEIGHT: 330px
}
#FrRi82 {
LEFT: 0px; VISIBILITY: hidden; TOP: 10px
}
</STYLE>
<SCRIPT language=JavaScript>
var kaiViRi82=1;
var foMeCoRi82="#FF0000"; //点链接后文字的颜色
var bgMeCoRi82="#FFE6FF"; //文字背景
var bgCoRi82="#000000"; //表格背景

var kaiWRi82=15,kaiHRi82=22;
var kaiImDaRi82="../wydh/images/110/damy.gif";

var foWRi82=23,foHRi82=22;
var foImRi82=new Array();
foImRi82[0]=new Array();
foImRi82[0][0]="../wydh/images/110/tsai3.gif";
foImRi82[0][1]="../wydh/images/110/eewenchin3.gif";
foImRi82[1]=new Array();
foImRi82[1][0]="../wydh/images/110/tsai1.gif";
foImRi82[1][1]="../wydh/images/110/eewenchin1.gif";
foImRi82[2]=new Array();
foImRi82[2][0]="../wydh/images/110/tsai2.gif";
foImRi82[2][1]="../wydh/images/110/eewenchin2.gif";
foImRi82[3]=new Array();
foImRi82[3][0]="../wydh/images/110/annie3.gif";
foImRi82[3][1]="../wydh/images/110/annie4.gif";
foImRi82[4]=new Array();
foImRi82[4][0]="../wydh/images/110/annie1.gif";
foImRi82[4][1]="../wydh/images/110/annie4.gif";
foImRi82[5]=new Array();
foImRi82[5][0]="../wydh/images/110/annie2.gif";
foImRi82[5][1]="../wydh/images/110/annie4.gif";

function anniejs() {
tsaijs(-1,"","","树状选单",2,"annie.htm","annie1","#804040","../wydh/images/110/javascript-ee1.gif",22,15);

tsaijs(0,-1,"yes","菜单选项",2,"","","#008000",0);
tsaijs(1,0,"no","菜单选项",2,"#","","#008000",3);
tsaijs(2,0,"no","菜单选项",2,"#","","#008000",3);
tsaijs(3,0,"yes","菜单选项",2,"","","#008000",0);
tsaijs(4,3,"no","菜单选项](2)",2,"#","","#008000",3);
tsaijs(5,3,"no","菜单选项",2,"#","","#008000",3);

tsaijs(6,-1,"yes","菜单选项",2,"","","#0080FF",1);
tsaijs(7,6,"no","菜单选项",2,"#","","#0080FF",4);
tsaijs(8,6,"no","菜单选项(1)",2,"#","","#0080FF",4);
tsaijs(9,6,"no","菜单选项(2)",2,"#","","#0080FF",4);
tsaijs(10,6,"yes","菜单选项",2,"","","#0080FF",1);
tsaijs(11,10,"no","菜单选项(1)",2,"#","","#0080FF",4);
tsaijs(12,10,"no","菜单选项(2)",2,"#","","#0080FF",4);
tsaijs(13,10,"no","菜单选项",2,"#","","#0080FF",4);

tsaijs(14,-1,"yes","菜单选项",2,"","","#FF8000",2);
tsaijs(15,14,"no","菜单选项",2,"#","","#FF8000",5);
tsaijs(16,14,"no","菜单选项",2,"#","","#FF8000",5);
tsaijs(17,14,"no","菜单选项(1)",2,"#","","#FF8000",5);
tsaijs(18,14,"no","菜单选项(2)",2,"#","","#FF8000",5);
tsaijs(19,14,"no","菜单选项(3)",2,"#","","#FF8000",5);

}

var obFrRRi82,obFrRi82;
var i,kazRi82,htmlRi82,html0Ri82=new Array(),html1Ri82=new Array();
var kaiRi82=new Array(),visRi82=new Array(),visCRi82=new Array();
var setRi82=new Array(),foImFlRi82=new Array();
var urlTopRi82,targetTopRi82,urlRi82=new Array(),targetRi82=new Array();
anniejs();

function tsaijs(nu,seNu,fl,ti,si,ur,ta,fo,im,w,h) {
if (nu!=-1) {
var i,kIm="",u,im0,im1,li0,li1;
kazRi82=nu;
setRi82[nu]=seNu;
if (seNu==-1) kaiRi82[nu]=0;
else kaiRi82[nu]=kaiRi82[seNu]+1;
if (kaiRi82[nu]==0) visRi82[nu]=true;
else visRi82[nu]=false;
if (fl=="yes") visCRi82[nu]=false;
else visCRi82[nu]="no";
urlRi82[nu]=ur,targetRi82[nu]=ta;
foImFlRi82[nu]=im;
kIm='<IMG SRC="'+kaiImDaRi82+'" ALIGN="bottom" WIDTH="'+(kaiWRi82*(kaiRi82[nu]+1))+'" HEIGHT="'+kaiHRi82+'">';
im0='<IMG SRC="'+foImRi82[im][0]+'" ALIGN="bottom" BORDER="0" WIDTH="'+foWRi82+'" HEIGHT="'+foHRi82+'">';
im1='<IMG SRC="'+foImRi82[im][1]+'" ALIGN="bottom" BORDER="0" WIDTH="'+foWRi82+'" HEIGHT="'+foHRi82+'">';

li0='<FONT SIZE="'+si+'" COLOR="'+fo+'"><SPAN style="background-color:'+bgCoRi82+'">'+ti+'</SPAN></FONT>';
li1='<FONT SIZE="'+si+'" COLOR="'+foMeCoRi82+'"><SPAN style="background-color:'+bgMeCoRi82+'">'+ti+'</SPAN></FONT>';
if (ur=="") u='<A HREF="#" onClick="eewenchin('+nu+',false);return false">';
else u='<A HREF="#" onClick="eewenchin('+nu+',true);return false">';
html1Ri82[nu]=new Array();
html1Ri82[nu][0]=kIm+u+im0+'</A> '+u+li0+'</A><BR>';
html1Ri82[nu][1]=kIm+u+im1+'</A> '+u+li0+'</A><BR>';
html1Ri82[nu][2]=kIm+u+im0+'</A> '+u+li1+'</A><BR>';
html1Ri82[nu][3]=kIm+u+im1+'</A> '+u+li1+'</A><BR>';
if (visRi82[nu]) {
if (visCRi82[nu]==true) htmlRi82+=html1Ri82[nu][1];
else htmlRi82+=html1Ri82[nu][0];
}
}
else {
urlTopRi82=ur,targetTopRi82=ta;
li0='<FONT SIZE="'+si+'" COLOR="'+fo+'"><SPAN style="background-color:'+bgCoRi82+'">'+ti+'</SPAN></FONT>';
li1='<FONT SIZE="'+si+'" COLOR="'+foMeCoRi82+'"><SPAN style="background-color:'+bgMeCoRi82+'">'+ti+'</SPAN></FONT>';
if (ur=="") u='<A HREF="#" onClick="eewenchin('+nu+',false);return false">';
else u='<A HREF="#" onClick="eewenchin('+nu+',true);return false">';
html0Ri82[0]=u+'<IMG SRC="'+im+'" ALIGN="bottom" BORDER="0" WIDTH="'+w+'" HEIGHT="'+h+'"></A> '+u+li0+'</A><BR>';
html0Ri82[1]=u+'<IMG SRC="'+im+'" ALIGN="bottom" BORDER="0" WIDTH="'+w+'" HEIGHT="'+h+'"></A> '+u+li1+'</A><BR>';
htmlRi82=html0Ri82[0];
}
}

function annie5344(obj,mes) {
if (document.all || document.getElementById) obj.innerHTML=mes;
else if (document.layers) {
obj.document.open();
obj.document.write(mes);
obj.document.close();
}
}

function ee5344(obj,flag) {
if (document.all || document.getElementById) {
if (flag) obj.style.visibility="visible";
else obj.style.visibility="hidden";
}
else if (document.layers) {
if (flag) obj.visibility="show";
else obj.visibility="hide";
}
}

function annietsai(obj,color) {
if (document.all || document.getElementById) obj.style.backgroundColor=color;
else if (document.layers) obj.bgColor=color;
}

function eewenchin(nu,fl) {
if (document.all || document.getElementById || document.layers) {
var i,f=true;
if (nu!=-1 && visCRi82[nu]==false) {
visCRi82[nu]=true;
if (kaiRi82[nu]==0) {
for (i=0;i<=kazRi82;i++) {
if (visCRi82[i]!="no" && i!=nu) visCRi82[i]=false;
if (kaiRi82[i]>0) visRi82[i]=false;
if (i>nu) {
if (kaiRi82[i]==0) f=false;
if (f) {
if (kaiRi82[i]<=kaiViRi82) {
if (visCRi82[i]!="no" && kaiRi82[i]<kaiViRi82) visCRi82[i]=true;
visRi82[i]=true;
}
}
}
}
}
else {
for (i=nu+1;i<=kazRi82;i++) {
if (kaiRi82[i]!=kaiRi82[nu]+1) f=false;
if (f) visRi82[i]=true;
}
}
}
if (nu==-1) htmlRi82=html0Ri82[1];
else htmlRi82=html0Ri82[0];
for (i=0;i<=kazRi82;i++) {
if (visRi82[i]) {
if (nu==i) {
if (visCRi82[i]==true) htmlRi82+=html1Ri82[i][3];
else if (visCRi82[i]==false) htmlRi82+=html1Ri82[i][2];
else htmlRi82+=html1Ri82[i][3];
}
else {
if (visCRi82[i]==true) htmlRi82+=html1Ri82[i][1];
else htmlRi82+=html1Ri82[i][0];
}
}
}
annie5344(obFrRi82,htmlRi82);
if (fl) {
var u,t;
if (nu!=-1) u=urlRi82[nu],t=targetRi82[nu];
else u=urlTopRi82,t=targetTopRi82;
if (t=="_top") top.location.href=u;
else if (t=="_self") self.location.href=u;
else if (t=="_blank") {
if (navigator.appVersion.indexOf("Mac")!=-1 && navigator.appName.indexOf("Internet Explore")!=-1) {
window.open(u,"","toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,favorites=yes,resizable=yes");
} else window.open(u);
}
else if (parent.frames[t]) parent.frames[t].location.href=u;
}
}
}

function tsaiwenchin() {
if (document.all || document.getElementById || document.layers) {
var i;
if (document.all) {
obFrRRi82=document.all("FrRRi82");
obFrRi82=document.all("FrRi82");
}
else if (document.getElementById) {
obFrRRi82=document.getElementById("FrRRi82");
obFrRi82=document.getElementById("FrRi82");
obFrRRi82.style.position="absolute";
}
else if (document.layers) {
obFrRRi82=document.layers["FrRRi82"];
obFrRi82=obFrRRi82.document.layers["FrRi82"];
}
if (bgCoRi82!="") annietsai(obFrRRi82,bgCoRi82);
ee5344(obFrRi82,true);
}
}
</SCRIPT>

第二步：把如下代码加入到<body>区域中

<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD vAlign=top width=155 height=330>
<SPAN class=classFrRi82 id=FrRRi82 style="POSITION: relative">
<SPAN class=classFrRi82 id=FrRi82>
<SCRIPT language=JavaScript>
document.write(htmlRi82);
</SCRIPT>
</SPAN>
</SPAN>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT language=JavaScript>
tsaiwenchin();
</SCRIPT>

200eboy 2002-02-04