加载中…
隐藏式导航菜单制作
(2007-04-17 19:46:11)效果展示: 点击下面看特效
代码如下：
<html><head>
<style type="text/css">
<!--
a:link {
a:visited { color:#000000; text-decoration: none}
a:hover {
td {
-->
</style>
<script>
document.write("<style type=text/css>#master {LEFT: -100px;
POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 200px;
Z-INDEX: 2}#menu {LEFT: 100px; POSITION: absolute; TOP: 25px;
VISIBILITY: visible; WIDTH: 18px; Z-INDEX: 5}#top {LEFT: 0px;
POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 100px;
Z-INDEX: 5}#screen {LEFT: 0px; POSITION: absolute; TOP: 31px;
VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}#screenlinks {LEFT:
0px; POSITION: absolute; TOP: 31px; VISIBILITY: visible; WIDTH:
100px; Z-INDEX: 5}</style>")
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
if(ie){
document.write('<style type="text/css">')
document.write("#screen {filter:Alpha(Opacity=30);}")
document.write("</style>")
}
if(ns){
document.write('<style type="text/css">')
document.write("#master {clip:rect(0,150,250,0);}")
document.write("</style>")
}
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
var master = new Object("element")
master.curLeft = -100; master.curTop = 10;
master.gapLeft = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft,
fromTop){
clearTimeout(eval_r(layerName).timer)
if(eval_r(layerName).curLeft != fromLeft){
else if(eval_r(layerName).curLeft <
fromLeft){eval_r(layerName).curLeft = eval_r(layerName).curLeft +
paceLeft}
else if(eval_r(layerName).curLeft >
fromLeft){eval_r(layerName).curLeft = eval_r(layerName).curLeft -
paceLeft}
if(ie){document.all[layerName].style.left =
eval_r(layerName).curLeft}
if(ns){document[layerName].left = eval_r(layerName).curLeft}
}
if(eval_r(layerName).curTop != fromTop){
else if(eval_r(layerName).curTop < fromTop){eval_r(layerName).curTop
= eval_r(layerName).curTop + paceTop}
else if(eval_r(layerName).curTop > fromTop){eval_r(layerName).curTop
= eval_r(layerName).curTop - paceTop}
if(ie){document.all[layerName].style.top =
eval_r(layerName).curTop}
if(ns){document[layerName].top = eval_r(layerName).curTop}
}
eval_r(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30)
}
function setPace(layerName, fromLeft, fromTop, motionSpeed){
eval_r(layerName).gapLeft = (Math.max(eval_r(layerName).curLeft,
fromLeft) - Math.min(eval_r(layerName).curLeft,
fromLeft))/motionSpeed
eval_r(layerName).gapTop = (Math.max(eval_r(layerName).curTop, fromTop)
- Math.min(eval_r(layerName).curTop, fromTop))/motionSpeed
moveAlong(layerName, eval_r(layerName).gapLeft,
eval_r(layerName).gapTop, fromLeft, fromTop)
}
var expandState = 0
function expand(){
if(expandState == 0){setPace("master", 0, 10, 10);
if(ie){document.menutop.src =
"http://s16.sinaimg.cn/orignal/48e939f10b55022dc86bf"}; expandState =
1;}
else{setPace("master", -100, 10, 10); if(ie){document.menutop.src =
"http://s10.sinaimg.cn/orignal/45b5c4dde519a9dce6909"}; expandState =
0;}
}
document.write("<div id=master><div id=menu
onmouseover=\"javascript:expand()\"><table border=0
cellpadding=0 cellspacing=0
width=18><tbody><tr><td width=\"100%\"><a
href=\"javascript:expand()\" onFocus=this.blur()><img
alt=点击这里展开/关闭快捷菜单 border=0 height=70 name=menutop
src=\"hidemenuout.gif\"
width=18></a></td></tr></tbody></table></div><div
id=top>");
document.write("<table border=0 cellpadding=0 cellspacing=0
width=100><tbody><tr><td
width=\"100%\"><img border=0 height=6 src=\"hidemenutop.gif\"
width=100></td></tr></tbody></table></div><div
id=screen onmouseout=\"javascript:expand()\"><table border=0
cellpadding=5 cellspacing=0
width=100><tbody><tr><td bgcolor=#336666
width=\"100%\" height=\"194\">");
document.write("<table bgcolor=#336666 border=0 cellpadding=0
cellspacing=0 width=\"100%\"
height=\"100%\"><tbody><tr><td
width=\"100%\"><table border=0 cellpadding=5 cellspacing=1
width=\"100%\"><tbody><tr><td bgcolor=#ecf6f5
width=\"100%\"><br><br><br><br><br></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div
id=screenlinks>");
document.write("<table border=0 cellpadding=6 cellspacing=0
width=100><tbody><tr><td style=\"FILTER:
alpha(opacity=90)\" width=\"100%\"><table bgcolor=#336666
border=0 cellpadding=0 cellspacing=0 width=\"100%\"
><tbody>");
document.write("<tr><td width=\"100%\"><table
border=0 cellpadding=6 cellspacing=1
width=\"100%\"><tbody><tr>");
document.write("<td bgcolor=#ECF6F5 width=\"100%\" align=\"center\"><font
color=#999900>冰河网址收录</font><br><br>");
document.write("<a href=http://blog.sina.com.cn/main/
target=\"_blank\">├博客首页</a><br>");
document.write("<a href=http://blog.sina.com.cn/m/liugang
target=\"_blank\">├大漠孤烟</a><br>");
document.write("<a href=http://bh.xoyoz.com/luntan
target=\"_blank\">├炫博论坛</a><br>");
document.write("<a href=http://www.sina.com.cn
target=\"_blank\">├新浪网站</a><br>");
document.write("<a href=http://www.newhua.com.cn
target=\"_blank\">├华军软件</a><br>");
document.write("<a href=http://www.sohu.com
target=\"_blank\">├搜狐网站</a><br>");
document.write("<a href=http://www.china.com
target=\"_blank\">├中华新闻</a><br>");
document.write("<a href=http://www.netease.com
target=\"_blank\">├网易社区</a><br>");
document.write("<a href=http://www.baidu.com
target=\"_blank\">├百度搜索</a><br>");
document.write("<a href=http://www.xilu.com
target=\"_blank\">├西路社区</a><br>");
document.write("</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div></div>");
if(ie){var sidemenu = document.all.master;}
if(ns){var sidemenu = document.master;}
function FixY(){
if(ie){sidemenu.style.top = document.body.scrollTop+10}
if(ns){sidemenu.top = window.pageYOffset+10}
}
setInterval("FixY()",100);
</script><meta http-equiv="Content-Type"
content="text/html; charset=gb2312">
<title>冰河隐藏式导航菜单</title>
</head><body
style="background:transparent"></body></html>
2）把上述代码复制到记事本，另存为"xxx.html"的文件名（网页的形式）。将其上传到网络空间得到你要调用的网址。
例如：http://bh.xoyoz.com/web/menu01.htm
新浪博客调用的代码如下：
<DIV style="LEFT:
0px; POSITION: absolute; TOP: 0px" align=center>
<DIV><IFRAME src="要调用的网址" frameBorder=0 width=123 scrolling=no height=236
allowTransparency></IFRAME></DIV></DIV>
参数说明：
LEFT: 0px; POSITION: absolute; TOP:
0px
喜欢
0
赠金笔