常用的JS隐藏导航条代码-网页设计-逆云网

<---隐藏导航条，该导航栏采用JavaScript设计制作，鼠标滑过感应区则展开，鼠标离开感应区则闭合隐藏导航栏，效果非常好！

导航条代码如下，请选择复制到单个html文档预览导航菜单效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>常用的JS隐藏导航栏代码-逆云网</title>
<SCRIPT language=JavaScript1.2>

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>
<LAYER class=NS onmouseout="move(-132, 0)"
onmouseover="move(132, 0)" left="0" bgcolor="black" name="object1" top="20"
visibility="hide">
<SCRIPT language=JavaScript1.2>
if (document.all)
document.write('<DIV ID="object1" style="Position : Absolute ;Left : -82px ;Top : 20px ;Width : 0px ;Z-Index : 20">')
</SCRIPT>

<TABLE bgColor=#000000 border=0 cellPadding=2 cellSpacing=1
onmouseout="move(-82, 0)" onmouseover=move(82,0) width=100>
<TBODY>
<TR>
<TD bgColor=#009900><FONT face=宋体 size=3><B>导航菜单</B></FONT></TD>
<TD align=middle bgColor=#006600 rowSpan=100 width=12>
<SCRIPT language=JavaScript1.2>
if (document.all||document.layers)
document.write('<p align="center"><font size="2" face="Arial Black">S<br>I<br>D<br>E<br>M<br>E<br>N<br>U</font></p>')
</SCRIPT>
</TD></TR>
<SCRIPT language=JavaScript1.2>
<!--
if (document.all||document.layers)
makeStatic();

if (document.layers) {
window.onload=position;
}

var sitems=new Array();
var sitemlinks=new Array();

// 配置以下

sitems[0]="网站首页";
sitems[1]="网页配色";
sitems[2]="网站布局";
sitems[3]="软件应用";

sitemlinks[0]="http://www.niyun.net";
sitemlinks[1]="http://www.niyun.net/l/36_1.htm";
sitemlinks[2]="http://www.niyun.net/l/4_1.htm";
sitemlinks[3]="http://www.niyun.net/l/35_1.htm";

for (i=0;i<=sitems.length-1;i++)
if (document.all) {document.write('<TR><TD bgcolor=white onclick="location=\''+sitemlinks[i]+'\'" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2>'+sitems[i]+'</FONT></TD></TR>')}
else if (document.layers){document.write('<TR><TD bgcolor="white"><FONT SIZE=2><A HREF="'+sitemlinks[i]+'">'+sitems[i]+'</A></FONT></TD></TR>')}

function hl(n) {
n.className='hl'}
function n(h) {
h.className='n'}
//--></SCRIPT>
</TBODY></TABLE>
<SCRIPT language=JavaScript1.2>
if (document.all)
document.write('<\/DIV>')
</SCRIPT>
</LAYER>

</body>
</html>

常用的JS隐藏导航条代码

相关文章