展开式链接菜单效果
下面是效果
将下面代码加入到你页面的<head></head>中......
<STYLE type=text/css>A {
COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none
; font-family: "宋体"}
A:hover {
COLOR: #3300FF; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline
}
A:active { COLOR: #000000; CURSOR: hand; FONT: normal 9pt "宋体"}
</STYLE>
<SCRIPT language=JavaScript>
var bV=parseInt(navigator.appVersion);
var NS4=(document.layers) ? true : false;
var IE4=((document.all)&&(bV>=4))?true:false;
var ver4 = (NS4 || IE4) ? true : false;
function expandIt(){return}
function expandAll(){return}
function nomsg(){self.status="";}
</SCRIPT>
<SCRIPT language=JAVASCRIPT>
isExpanded = false;
function getIndex(el) {
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 (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
tempColl = document.all.tags("DIV");
for (i=0; i<tempColl.length; i++) {
if (tempColl(i).className == "child") tempColl(i).style.display
= "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {expandIE(el)} else {expandNS(el)}
}
function expandIE(el) {
whichEl = eval(el + "Child");
whichIm = event.srcElement;
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
whichIm.src = "bullet-minus.gif";
}
else {
whichEl.style.display = "none";
whichIm.src = "bullet-plus.gif";
}
}
function expandNS(el) {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
whichIm.src = "bullet-minus.gif";
}
else {
whichEl.visibility = "hide";
whichIm.src = "bullet-plus.gif";
}
arrange();
}
function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
function expandAll(isBot) {
newSrc = (isExpanded) ? "bullet-plus.gif" : "bullet-minus.gif";
if (NS4) {
document.images["imEx"].src = newSrc;
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Parent") != -1) {
whichEl.document.images["imEx"].src = newSrc;
}
if (whichEl.id.indexOf("Child") != -1) {
whichEl.visibility = (isExpanded) ? "hide" : "show";
}
}
arrange();
if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
if (divColl(i).className == "child") {
divColl(i).style.display = (isExpanded) ? "none" : "block";
}
}
imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
imColl(i).src = newSrc;
}
}
isExpanded = !isExpanded;
}
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:hidden}");
write(".child {position:absolute; visibility:hidden}");
write(".regular {position:absolute; visibility:hidden}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
onload = initIt;
</SCRIPT>
将下面的代码加入到你页面中的<body></body>中......
<a href="#" onClick="expandAll(false); return false"><img alt=展开或关闭全部菜单 border=0 height=9 name=imEx src="" width=9><font style="FONT-SIZE: 9pt">展开/关闭全部</font></a>
<div class=parent id=el1Parent style="MARGIN-LEFT:
0px"><table border=1 cellpadding=0 cellspacing=0 width=101><tbody><tr>
<td class=label><div align="center">
<a href="#" onClick="expandIt('el1'); return false"
TEXT-DECORATION: none" ;>娱乐站点</a></div></td></tr></tbody></table></div>
<div class=child id=el1Child style="MARGIN-LEFT: 0px"><table
border=1 cellpadding=0 cellspacing=0 width=96><tbody>
<tr><td><div align="center"><a href="http://www.goodsgy.com"
target=data>南北工作室</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.lxbbs.com"
target=data>辽西江湖</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.seasky.com.cn"
target=data>逸 飞 岭</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.china139.com/club/"
target=data>玫瑰社区</a></div></td></tr>
<tr><td><div align="center"><a href="http://chat.163.com"
target=data>网易聊天</a></div></td></tr>
</tbody></table></div>
<div class=parent id=el2Parent style="MARGIN-LEFT: 0px"><table
border=1 cellpadding=0 cellspacing=0 width=101><tbody><tr>
<td class=label><div align="center">
<a href="#" onClick="expandIt('el2'); return false"
TEXT-DECORATION: none" ;>电脑网络</a></div></td></tr></tbody></table></div>
<div class=child id=el2Child style="MARGIN-LEFT: 0px"><table
border=1 cellpadding=0 cellspacing=0 width=96><tbody>
<tr><td><div align="center"><a href="http://www.cfan.cn.net"
target=data>电脑爱好者</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.cpcw.com"
target=data>电 脑 报</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.yeasky.com"
target=data>天 极 网</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.xy.jx.cn"
target=data>新余信息港</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.sohu.com"
target=data>搜 狐 网</a></div></td></tr>
</tbody></table></div>
<div class=parent id=el3Parent style="MARGIN-LEFT: 0px"><table
border=1 cellpadding=0 cellspacing=0 width=101><tbody><tr>
<td class=label><div align="center">
<a href="#" onClick="expandIt('el3'); return false"
TEXT-DECORATION: none" ;>搜索引擎</a></div></td></tr></tbody></table></div>
<div class=child id=el3Child style="MARGIN-LEFT: 0px"><table
border=1 cellpadding=0 cellspacing=0 width=96><tbody>
<tr><td><div align="center"><a href="http://www.163.com"
target=data>网 易</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.sina.com.cn"
target=data>新 浪 网</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.enet.com.cn"
target=data>硅谷动力</a></div></td></tr>
<tr><td><div align="center"><a href="http://www.sohu.com"
target=data>搜 狐 网</a></div></td></tr>
<tr><td><div align="center"><a href="http://cn.yahoo.com"
target=data>雅虎中国</a></div></td></tr>
</tbody></table></div>
在这个菜单中的网站个数不受限制,你自己可以任意增加减少.在此希望你可以给本站做链接,谢谢！！！