树形导航菜单 <html> <head><title>树型导航菜单</title></head> <body bgcolor="#ffc0c0"> <h2>树型导航菜单示例</h2><hr> <mce:script language="JavaScript"><!-- //声明几个变量 NS4 = (document.layers) ? 1 : 0;// 当用户的浏览器是Netscape时,变量NS4的值为1 IE4 = (document.all) ? 1 : 0; //当用户的浏览器是IE时,变量IE4的值为1 ver4 = (NS4 || IE4) ? 1 : 0; //当用户的浏览器是IE或是Netscape时,变量ver4的值为1 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}") } else { write(".child {display:none}") } //隐藏子菜单 write("</STYLE>"); } } function getIndex(el) { //定义一个函数getIndex,功能是获得变量ind的值 ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind; } function arrange() //定义一个函数,功能是定义页面上元素的位置。 { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; //当菜单打开时,子菜单位置顺序往下推; //菜单合起时,子菜单位置自动上移 if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } } } function initIt() { //页面载入时,首先调用该函数。功能是初始化菜单。 if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { //对于NS浏览器,设置菜单隐藏 whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { //对于IE浏览器,设置菜单隐藏 whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } } } function expandIt(el) { if (!ver4) return; if (IE4) { //对于IE浏览器 whichEl = eval(el + "Child"); //如果菜单是打开的,那么当再点击时,子菜单就不可见 //如果菜单是关闭状态,那么当再点击时,子菜单就可见。 if (whichEl.style.display == "none") {whichEl.style.display = "block";} else {whichEl.style.display = "none";} } else { //对于非IE浏览器 //如果菜单是打开的,那么当再点击时,子菜单就不可见 //如果菜单是关闭状态,那么当再点击时,子菜单就可见。 whichEl = eval("document." + el + "Child"); if (whichEl.visibility == "hide") {whichEl.visibility = "show";} else {whichEl.visibility = "hide";} arrange(); } } onload = initIt; // --></mce:script> <div id="KB1Parent" class="parent"> <a href="#" mce_href="#" onClick="expandIt('KB1'); return false" > <img src="plus.gif" mce_src="plus.gif" border=0>文件夹一</a> </div> <div id="KB1Child" class="child"> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt=""> <img src="open.gif" mce_src="open.gif" border=0>页面一</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt="" width="15" height="11"> <img src="open.gif" mce_src="open.gif" border=0>页面二</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt="" width="15" height="11"> <img src="open.gif" mce_src="open.gif" border=0>页面三</a> </div> <div id="KB2Parent" class="parent"> <a href="#" mce_href="#" onClick="expandIt('KB2'); return false" > <img src="plus.gif" mce_src="plus.gif" border=0>文件夹二</a> </div> <div id="KB2Child" class="child"> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt="" width="15" height="11"> <img src="open.gif" mce_src="open.gif" border=0>页面一</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt=""> <img src="open.gif" mce_src="open.gif" border=0>页面二</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt="" width="15" height="11"> <img src="open.gif" mce_src="open.gif" border=0>页面三</a> </div> <div id="KB3Parent" class="parent"> <a href="#" mce_href="#" onClick="expandIt('KB3'); return false" > <img src="plus.gif" mce_src="plus.gif" border=0>文件夹三</a> </div> <div id="KB3Child" class="child"> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt=""> <img src="open.gif" mce_src="open.gif" border=0>页面一</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="open.gif" mce_src="open.gif" border=0>页面二</a> <br> <a href="sample.htm" mce_href="sample.htm" target="_blank" > <img src="spacer.gif" mce_src="spacer.gif" border=0 alt=""> <img src="open.gif" mce_src="open.gif" border=0>页面三</a> </div> <mce:script language="JavaScript"><!-- if (NS4) { //如果用户的浏览器是NetScape,先初始化变量 firstEl = "KB1Parent"; firstInd = getIndex(firstEl); arrange(); } // --></mce:script> </body> </html> 仿QQ导航菜单 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>仿QQ菜单</title> <mce:script language='JavaScript'><!-- var headHeight = 22;var bodyHeight = 202;var objcount = 6;var step = 10;var moving = false; function showme(obj1, obj2) { if (moving) return; moving = true; for(i=0;i<document.all.tags('td').length;i++) if (document.all.tags('td')[i].className.indexOf('headtd') == 0) document.all.tags('td')[i].className = 'headtd1'; obj2.className = 'headtd2'; moveme(obj1); } function moveme(obj) { idnumber = parseInt(obj.id.substr(4)); objtop = headHeight * (idnumber - 1); objbuttom = bodyHeight + headHeight * (idnumber - 2); currenttop = parseInt(obj.style.top); if (currenttop >= objbuttom) { countid = 1; for(i=0;i<document.all.tags('div').length;i++) if (document.all.tags('div')[i].id == 'item'+countid+'body') { obj = document.all.tags('div')[i]; objtop = headHeight * (countid - 1); if (countid == idnumber) { moveup(obj,objtop,false); break; } else moveup(obj,objtop,true); countid++; } } else if ((currenttop >= objtop) && (idnumber < objcount)) { idnumber++; countid = objcount; for(i=document.all.tags('div').length-1;i>=0;i--) if (document.all.tags('div')[i].id == 'item'+countid+'body') { obj = document.all.tags('div')[i]; objbuttom = bodyHeight + headHeight * (countid - 2); if (countid == idnumber) { movedown(obj,objbuttom,false); break; } else movedown(obj,objbuttom,true); countid--; } } } function moveup(obj,objtop,ismove) { currenttop = parseInt(obj.style.top); if (currenttop > objtop) { obj.style.top = currenttop - step; setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1) return; } moving = ismove; } function movedown(obj,objbuttom,ismove) { currenttop = parseInt(obj.style.top); if (currenttop < objbuttom) { obj.style.top = currenttop + step; setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1) return; } moving = ismove; } // --></mce:script> <mce:style type='text/css'><!-- .headtd1 { background: #eaeaea; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; cursor: hand; font-size: 9pt}.headtd2 { background: #cccccc; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; cursor: hand; font-size: 9pt}.bodytd { background: #eeeeee; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; font-size: 9pt} --></mce:style><style type='text/css' mce_bogus="1">.headtd1 { background: #eaeaea; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; cursor: hand; font-size: 9pt}.headtd2 { background: #cccccc; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; cursor: hand; font-size: 9pt}.bodytd { background: #eeeeee; border: 1px outset; border-color: #ffffff #000000 #000000 #ffffff; font-size: 9pt}</style> </head> <body> <h1>仿QQ菜单示例</h1><hr> <div id='mainboard' style='position:absolute; left:2px; top:100px; width:120px; height:312px; z-index:1; overflow: hidden; background: #eeeeee;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; z-index:2; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item1head' height='20' class='headtd2' οnclick='showme(item1body,this)' align='center'>菜单一</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> <div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; z-index:3; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item2head' height='20' class='headtd1' οnclick='showme(item2body,this)' align='center'>菜单二</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> <div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; z-index:4; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item3head' height='20' class='headtd1' οnclick='showme(item3body,this)' align='center'>菜单三</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> <div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; z-index:5; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item4head' height='20' class='headtd1' οnclick='showme(item4body,this)' align='center'>菜单四</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> <div id='item5body' style='position:absolute; left:0; top:268; width:120px; height:202px; z-index:6; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item5head' height='20' class='headtd1' οnclick='showme(item5body,this)' align='center'>菜单五</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> <div id='item6body' style='position:absolute; left:0; top:290; width:120px; height:202px; z-index:7; overflow: hidden'> <table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'> <tr><td id='item6head' height='20' class='headtd1' οnclick='showme(item6body,this)' align='center'>菜单六</td></tr> <tr><td class='bodytd' align='center'> <a href="http://localhost/" mce_href="http://localhost/">链接一</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接二</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接三</a><br><br> <a href="http://localhost/" mce_href="http://localhost/">链接四</a><br><br> </td></tr></table></div> </div> </body> </html> 隐藏菜单 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>隐藏菜单</title> <SCRIPT language="JavaScript"> <!-- function move(x, y) { if (document.all) { object1.style.pixelLeft += x; object1.style.pixelTop += y;} else if (document.layers) { document.object1.left += x; document.object1.top += y; }}; function position() { document.object1.left += -82; document.object1.top += 0; document.object1.visibility = "show" }; function makeStatic() { if (document.all) {object1.style.pixelTop=document.body.scrollTop+20} else {eval('document.object1.top=eval(window.pageYOffset+20)');} setTimeout("makeStatic()",0);} //--> </SCRIPT> <STYLE type=text/css>.hl { BACKGROUND-COLOR: green; COLOR: white; CURSOR: hand } .n { } </STYLE> </head> <body bgcolor="#ffc0c0"> <h1 align="right">隐藏菜单示例</h1> <LAYER class=NS οnmοuseοut="move(-132, 0)" οnmοuseοver="move(132, 0)" left="0" bgcolor="black" name="object1" top="100" visibility="hide"> <SCRIPT language=JavaScript1.2> <!-- if (document.all) { document.write('<DIV ID="object1" style="Position:Absolute;'); document.write('Left:-82px;Top:20px;Width:0px;Z-Index:20">'); } document.write('<TABLE bgColor=#000000 border=0 cellPadding=2 cellSpacing=1'); document.write(' οnmοuseοut="move(-82, 0)" οnmοuseοver=move(82,0) width=100>'); document.write('<TBODY><TR><TD bgColor=#009900>'); document.write('<FONT face=宋体 size=3><B>导航菜单</B></FONT></TD>'); document.write('<TD align=middle bgColor=#006600 rowSpan=100 width=12>'); if (document.all||document.layers) { document.write('<p align="center" style="writing-mode:tb-rl;" mce_style="writing-mode:tb-rl;">'); document.write('<font size="2" face="Arial Black" color="white">'); document.write('隐 藏 菜 单</font></p></TD></TR>') } if (document.all||document.layers) makeStatic(); if (document.layers) { window.οnlοad=position; } var sitems=new Array(); var sitemlinks=new Array(); // 配置以下 sitems[0]="站内链接一"; sitems[1]="站内链接二"; sitems[2]="站内链接三"; sitems[3]="站内链接四"; sitemlinks[0]="http://localhost"; sitemlinks[1]="http://localhost"; sitemlinks[2]="http://localhost"; sitemlinks[3]="http://localhost"; for (i=0;i<=sitems.length-1;i++) if (document.all) { document.write('<TR><TD bgcolor=white οnclick="location=/''+sitemlinks[i]); document.write('/'" οnmοuseοver="className=/'hl/'" οnmοuseοut="className=/'n/'">'); document.write('<FONT SIZE=2>'+sitems[i]+'</FONT></TD></TR>'); } else if (document.layers) { document.write('<TR><TD bgcolor="white"><FONT SIZE=2>'); document.write('<A HREF="'+sitemlinks[i]+'" mce_HREF="'+sitemlinks[i]+'">'+sitems[i]); document.write('</A></FONT></TD></TR>'); } function hl(n) { n.className='hl' } function n(h) { h.className='n' } document.write('</TBODY></TABLE>'); if (document.all) document.write('<//DIV>') //--> </SCRIPT> </LAYER> </body> </html> 触发性导航菜单 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>菜单样式</title> <STYLE type=text/css> .sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8 } .main_tab { BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8 } </STYLE> <SCRIPT language="javascript"> <!-- function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells [i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies [i].style.display="none"; mainTable.tBodies [n].style.display="block"; } //--> </SCRIPT> </head> <body> <h1>触发型导航菜单</h1><hr> <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0> <TBODY> <TR align=middle height=20> <TD class=sec2 οnclick=secBoard(0) width="10%">关于TBODY标记</TD> <TD class=sec1 οnclick=secBoard(1) width="10%">关于cells集合</TD> <TD class=sec1 οnclick=secBoard(2) width="10%">关于tBodies集合</TD> <TD class=sec1 οnclick=secBoard(3) width="10%">关于display属性</TD> </TR> </TBODY> </TABLE> <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0> <!--关于TBODY标记--> <TBODY style="DISPLAY: block" mce_style="DISPLAY: block"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD>指定行做为表体。<BR><BR>注释:TBODY要素是块要素,并且需要结束标签。<BR><BR>即使如果表格没有显式定义TBODY要素,该要素也提供给所有表。<BR> </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> <!--关于cells集合--> <TBODY style="DISPLAY: none" mce_style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD>检索表行或者整个表中所有单元格的集合。<BR><BR>应用于TR、TABLE。 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> <!--关于tBodies集合--> <TBODY style="DISPLAY: none" mce_style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD>检索表中所有TBODY对象的集合。<BR><BR>对象在该集合中按照HTML源顺序排列。<BR><BR>应用于TABLE。 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> <!--关于display属性--> <TBODY style="DISPLAY:none" mce_style="DISPLAY:none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD>设置或者检索对象是否被提供。<BR><BR>可能的值为block、none、inline、list-item、table-header-group、table-footer-group。<BR><BR>该特性可读写,块要素默认值为block,内联要素默认值为inline;层叠样式表 (CSS)属性不可继承。 </TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE> </body> </html>