网页顶部隐藏css菜单代码
代码简介：
隐藏在顶部的菜单，类似QQ最小化时的窗口一样，浮动在屏幕的最上方，鼠标放上去会自动展开，这是基本的实现步骤，如果喜欢的话，颜色什么的你自己改一下。
代码内容：
<html>
<head>
<title>网页顶部隐藏css菜单代码_网页代码站(www.webdm.cn)</title>
<style>#D1 {
BACKGROUND-COLOR: skyblue;
BORDER: white 2px outset;
LEFT: 0px; POSITION: absolute;
TOP: 0px; VISIBILITY: hidden;
WIDTH: 298px;
layer-background-color: lightgreen
}
a{font-size:9pt}
a:link{text-decoration:none}
a:hover{text-decoration:none;color:yellow}
a:visited{text-decoration:none}
.40pt{font-size:40pt;color:#FFF;}
</style>
<script language="javascript">
function menuIn() //菜单隐藏
{
if(n4) {
clearTimeout(out_ID)
if( menu.top > menuH*-1+20+10 ) {
menu.top -= 8
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.top > menuH*-1+20 ) {
menu.top--
in_ID = setTimeout("menuIn()", 1)
}
}
else {
clearTimeout(out_ID)
if( menu.pixelTop > menuH*-1+20+10 ) {
menu.pixelTop -= 8
in_ID = setTimeout("menuIn()", 1)
}
else if( menu.pixelTop > menuH*-1+20 ) {
menu.pixelTop--
in_ID = setTimeout("menuIn()", 1)
}
}
}
function menuOut() //菜单显示
{
if(n4) {
clearTimeout(in_ID)
if( menu.top < -10) {
menu.top += 4
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.top < 0) {
menu.top++
out_ID = setTimeout("menuOut()", 1)
}
}
else {
clearTimeout(in_ID)
if( menu.pixelTop < -10) {
menu.pixelTop += 2
out_ID = setTimeout("menuOut()", 1)
}
else if( menu.pixelTop < 0 ) {
menu.pixelTop++
out_ID = setTimeout("menuOut()", 1)
}
}
}
function fireOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}
function fireOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}
function init() {
if(n4) {
menu = document.D1
menuH = menu.document.height
menu.top = menu.document.height*-1+20
menu.onmouseover = menuOut
menu.onmouseout = menuIn
menu.visibility = "visible"
}
else if(e4) {
menu = D1.style
menuH = D1.offsetHeight
D1.style.pixelTop = D1.offsetHeight*-1+20
D1.onmouseover = fireOver
D1.onmouseout = fireOut
D1.style.visibility = "visible"
}
}
F_over=F_out=in_ID=out_ID=null
n4 = (document.layers)?1:0
e4 = (document.all)?1:0;
</script>
</head>
<body onload="init()"><br>
鼠标放到蓝色上面试试。
<div id="D1">
<table border="0" width="100%">
<TBODY>
<tr>
<td align="middle" bgColor="0066CC" rowSpan="2"><b>Menu</b></td>
<td>
<ul>
<li><a href="http://webdm.cn">
ASP源代码</a>
</li>
<li><a href="http://webdm.cn">
PHP源代码</a>
</li>
<li><a href="http://webdm.cn">
JSP源代码</a>
</li>
<li><a href="http://webdm.cn">
VC源代码</a>
</li>
<li><a href="http://webdm.cn">
AJAX源代码</a>
</li>
</ul>
</td>
<td>
<ul>
<li><a href="http://webdm.cn">
新闻文章</a>
</li>
<li><a href="http://webdm.cn">
论坛社区</a>
</li>
<li><a href="http://webdm.cn">
聊天留言</a>
</li>
<li><a href="http://webdm.cn">
CMS建站</a>
</li>
<li><a href="javascript:void(0)">
人才房产</a>
</li>
</ul>
</td>
</tr>
<tr>
<td align="right" colSpan="2">
</td>
</tr>
</TBODY>
</table>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/e98fa39d-b3fd-4120-be1e-2d1d540b9d55.html
