[查看演示] 源码如下
----------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>下滑菜单－www.51windows.Net</title>
<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;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+")");
}
}
}
var nbottom=0,speed=1;
function displayMenu(obj)
{
obj.style.clip="rect(0 100% "+nbottom+"% 0)";
nbottom+=speed;
if(nbottom<=100)
{
timerID=setTimeout("displayMenu("+obj.id+"),70");
}
else clearTimeout(timerID);
}
function showMenu(obj)
{
obj.style.display="block";
obj.style.clip="rect(0 0 0 0)";
nbottom=5;
displayMenu(obj);
}
function hideMenu(obj)
{
nbottom=0;
obj.style.display="none";
}
function keepMenu(obj)
{
obj.style.display="block";
}
</script>
</head>
<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)">
教育网站
</div>
</td>
<td width="20%">
<div align="center"id="menubar_2" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)">
电脑网站
</div>
</td>
<td width="20%">
<div align="center"id="menubar_3" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)">
免费邮件
</div>
</td>
<td width="20%">
<div align="center"id="menubar_4" class="menubar" onmouseover="menuControl(1)" onmouseout="menuControl(0)">
其它网站
</div>
</td>
</tr>
<tr>
<td width="20%">
<div align="left"id="menu_1" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)">
<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)">
<a href="http://www.yesky.com">天极网</a><br>
<a href="http://www.cfan.cn.net">电脑爱好者</a><br>
<a href="http://www.intoweb.com.cn">上网杂志</a>
</div>
</td>
<td width="20%">
<div align="left"id="menu_3" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)">
<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>
</div>
</td>
<td width="20%">
<div align="left"id="menu_4" class="menu" onmouseover="keepMenu(this)" onmouseout="hideMenu(this)">
<a href="http://www.sohu.com.cn">搜狐</a><br>
<a href="http://www.yahoo.com">雅虎</a><br>
<a href="http://www.cseek.com">搜索客</a><br>
<a href="http://www.sina.com">新浪网</a><br>
<a href="httP;//www.cqcas.edu.cn/user/sailing">远航网站</a>
</div>
</td>
</tr>
</table>
</body>
</html>
</script>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
