随机更换效果的链接菜单
下面是效果
将下面的代码加入到你网页的<head></head>标签中....
<style type="text/css">
.menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;border-width:1px;border-style:outset;color:yellow;background:#0099cc}
.menu{position:absolute;filter:revealTrans(duration:2;transition:23);top:30px;width:140px;display:none;border-width:2px;border-style:outset;border-color:white
sliver sliver white;background:yellow;padding:15px}
.menu A{text-decoration:none;color:blue}
.menu A:hover{color:#00ffff}
</style>
<script language="javascript">
function menuControl(show)
{
window.event.cancelBubble=true;
var objID=event.srcElement.id;
var index=objID.indexOf("_");
var mainID=objID.substring(0,index);
var numID=objID.substring(index+1,objID.length);
if(mainID=="menubar")
{
if(show==1)
{
eval("showMenu("+"menu_"+numID+")");
}
else
{
eval("hideMenu("+"menu_"+numID+")");
}
}
}
function showMenu(obj)
{
obj.filters.revealTrans.Apply();
obj.style.display="block";
obj.filters.revealTrans.Play();
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
</script>
将下面的代码加入到<body></body>标签中....
<table border="0" width="400" cellspacing="0"
cellpadding="0" style="font-size:15px">
<tr>
<td width="20%">
<div align="center"id="menubar_1" class="menubar"
onmouseover="menuControl(1)" onmouseout="menuControl(0)"
style="left: 175px; top: 198px">
教育网站 </div>
</td>
<td width="20%">
<div align="center"id="menubar_2" class="menubar"
onmouseover="menuControl(1)" onmouseout="menuControl(0)"
style="left: 276px; top: 198px">
电脑网站 </div>
</td>
<td width="20%">
<div align="center"id="menubar_3" class="menubar"
onmouseover="menuControl(1)" onmouseout="menuControl(0)"
style="left: 377px; top: 198px">
免费邮件 </div>
</td>
<td width="20%">
<div align="center"id="menubar_4" class="menubar"
onMouseOver="menuControl(1)" onMouseOut="menuControl(0)"
style="top: 198px; left: 477px">
搜索引擎网站 </div>
</td>
<td width="20%">
<div align="center"id="menubar_5" class="menubar"
onMouseOver="menuControl(1)" onMouseOut="menuControl(0)"
style="top: 198px; left: 577px">
电信网站</div>
</td>
</tr>
<tr>
<td width="20%">
<div align="left"id="menu_1" class="menu"
onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"
style="left: 174px; top: 218px; width: 128px; height: 45px">
<a href="http://www.cqcas.edu.cn">重庆民政学校</a><br>
<a href="http://www.cqu.edu.cn">重庆大学</a><br>
<a href="http://www.cquc.edu.cn">重庆交通学院</a> </div>
</td>
<td width="20%">
<div align="left"id="menu_2" class="menu"
onMouseOver="keepMenu(this)" onMouseOut="hideMenu(this)"
style="left: 275px; top: 218px; width: 119px; height: 63px">
<p><a href="http://www.cpcw.com">电脑报</a><br>
<a href="http://www.cfan.cn.net">电脑爱好者</a><br>
<a href="http://www.intoweb.com.cn">上网杂志</a><br>
<a href="http://www.yesky.com">天极网</a>
</div>
</td>
<td width="20%">
<div align="left"id="menu_3" class="menu"
onmouseover="keepMenu(this)" onmouseout="hideMenu(this)"
style="left: 376px; top: 218px; width: 149px; height: 60px">
<a href="http://www.163.com">163电子邮件</a><br>
<a href="http://freemail.263.net">首都在线</a><br>
<a href="http://www.21cn.com">21CN电子邮件</a><br>
<a href="http://www.chinese.com">炎黄在线</a><br>
<a href="http://www.39.net">三九人家电子信箱</a><br>
<a href="http://freemail.8848.net">8848电子信箱</a> </div>
</td>
<td width="20%">
<div align="left"id="menu_4" class="menu"
onMouseOver="keepMenu(this)" onMouseOut="hideMenu(this)"
style="left: 477px; top: 218px; width: 169px; height: 75px">
<a href="http://www.sohu.com">搜狐</a><br>
<a href="http://cn.yahoo.com">雅虎</a><br>
<a href="http://www.cseek.com">搜索客</a><br>
<a href="http://www.sina.com.cn">新浪网</a><br>
<a href="httP://search.163.com">网易搜索</a><br>
<a href="http://www.enet.com.cn">硅谷动力搜索</a> </div>
</td>
<td width="20%">
<div align="left"id="menu_5" class="menu"
onMouseOver="keepMenu(this)" onMouseOut="hideMenu(this)"
style="left: 578px; top: 218px; width: 169px; height: 75px">
<a href="http://www.online.ln.cn">辽宁在线北方时空</a><br>
<a href="http://down.goodsgy.com">软件下载</a><br>
<a href="http://www.xy.jx.cn">新余市信息港</a><br>
<a href="http://www.jj.jx.cn">九江信息港</a><br>
<a href="http://music.goodsgy.com">彩铃彩信</a><br>
<a href="http://www.pjptt.ln.cn">鹤乡热线</a></div>
</td>
</tr>
</table>
在这个菜单中的网站个数不受限制,你自己可以任意增加减少.在此希望你可以给本站做链接,谢谢！！！