推拉门式样的菜单[根据提示修改][共2步]
====1、将以下代码加入到HEML的<head></head>之间：
<style type="text/css">
<!--
.link {
color: #000000;
text-decoration: none;
}
A.link:hover {
color: red;
}
A.link:active {
color: #000000;
text-decoration: none;
} //-->
</style>
<style type="text/css">
<!--
#slidemenubar2 {
position: absolute;
left: -110pt;
width: 120pt;
top: 100pt;
border: 1.5pt solid black;
background-color: #ffffff;
layer-background-color: #ffffff;
font: 9pt/20pt "宋体";
}
body {
font-size: 9pt;
margin: 0pt
}
#slidemenubar {
position: absolute;
left: -110pt;
width: 120pt;
top: 100pt;
border: 1.5pt black solid;
background-color: #F3F3F3;
layer-background-color: lightyellow;
font: 9pt/20pt "宋体";
}
//-->
</style>====2、将以下代码加入到HEML的<body></body>之间：
<script language="JavaScript1.2">
if (document.all)
document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems = new Array()
var sitemlinks = new Array()
//以下是菜单内容，自由设置；
sitems[0] = "本站首页"
sitems[1] = "最新更新"
sitems[2] = "梦想软件"
sitems[3] = "其它栏目"
sitems[4] = "桌面壁纸"
sitems[5] = "给我留言"
sitems[6] = "下载特区"
sitems[7] = "Email Me"
sitems[8] = "我的简介"
//菜单项目连接
sitemlinks[0] = "http://www.happydrips.com"
sitemlinks[1] = "http://www.abc.com"
sitemlinks[2] = "http://abc.ab.com"
sitemlinks[3] = "../index.htm"
sitemlinks[4] = "../jsschool/index.htm"
sitemlinks[5] = "../../../gsbook.htm"
sitemlinks[6] = "../../../perl/index.htm"
sitemlinks[7] = "mailto:yshot@263.net"
sitemlinks[8] = "http://www.happydrips.com"
for (i = 0; i <= sitems.length - 1; i++)
document.write('<a href=' + sitemlinks[i] + '>' + sitems[i] + '</a><br>')
</script>
</layer>
<script language="JavaScript1.2">
function regenerate() {
window.location.reload()
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400)
}
window.onload = regenerate2
if (document.all) {
document.write('</div>')
themenu = document.all.slidemenubar2.style
rightboundary = 0
leftboundary = -150
} else {
themenu = document.layers.slidemenubar
rightboundary = 150
leftboundary = 10
}
function pull() {
if (window.drawit)
clearInterval(drawit)
pullit = setInterval("pullengine()", 50)
}
function draw() {
clearInterval(pullit)
drawit = setInterval("drawengine()", 50)
}
function pullengine() {
if (document.all && themenu.pixelLeft < rightboundary)
themenu.pixelLeft += 5
else if (document.layers && themenu.left < rightboundary)
themenu.left += 5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine() {
if (document.all && themenu.pixelLeft > leftboundary)
themenu.pixelLeft -= 5
else if (document.layers && themenu.left > leftboundary)
themenu.left -= 5
else if (window.drawit)
clearInterval(drawit)
}
</script>完整源码：
<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>New Page 1</title>
<style type="text/css">
<!--.link {
color: #000000;
text-decoration: none;
}
A.link:hover {
color: red;
}
A.link:active {
color: #000000;
text-decoration: none;
} //-->
</style>
<style type="text/css">
<!-- #slidemenubar2 {
position: absolute;
left: -110pt;
width: 120pt;
top: 100pt;
border: 1.5pt solid black;
background-color: #ffffff;
layer-background-color: #ffffff;
font: 9pt/20pt "宋体";
}
body {
font-size: 9pt;
margin: 0pt
}
#slidemenubar {
position: absolute;
left: -110pt;
width: 120pt;
top: 100pt;
border: 1.5pt black solid;
background-color: #F3F3F3;
layer-background-color: lightyellow;
font: 9pt/20pt "宋体";
}
//-->
</style>
</head>
<body>
<script language="JavaScript1.2">
if (document.all)
document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems = new Array()
var sitemlinks = new Array()
//以下是菜单内容，自由设置；
sitems[0] = "本站首页"
sitems[1] = "最新更新"
sitems[2] = "梦想软件"
sitems[3] = "其它栏目"
sitems[4] = "桌面壁纸"
sitems[5] = "给我留言"
sitems[6] = "下载特区"
sitems[7] = "Email Me"
sitems[8] = "我的简介"
//菜单项目连接
sitemlinks[0] = "http://www.happydrips.com"
sitemlinks[1] = "http://www.abc.com"
sitemlinks[2] = "http://abc.ab.com"
sitemlinks[3] = "../index.htm"
sitemlinks[4] = "../jsschool/index.htm"
sitemlinks[5] = "../../../gsbook.htm"
sitemlinks[6] = "../../../perl/index.htm"
sitemlinks[7] = "mailto:yshot@263.net"
sitemlinks[8] = "http://www.happydrips.com"
for (i = 0; i <= sitems.length - 1; i++)
document.write('<a href=' + sitemlinks[i] + '>' + sitems[i] + '</a><br>')
</script>
</layer>
<script language="JavaScript1.2">
function regenerate() {
window.location.reload()
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400)
}
window.onload = regenerate2
if (document.all) {
document.write('</div>')
themenu = document.all.slidemenubar2.style
rightboundary = 0
leftboundary = -150
} else {
themenu = document.layers.slidemenubar
rightboundary = 150
leftboundary = 10
}
function pull() {
if (window.drawit)
clearInterval(drawit)
pullit = setInterval("pullengine()", 50)
}
function draw() {
clearInterval(pullit)
drawit = setInterval("drawengine()", 50)
}
function pullengine() {
if (document.all && themenu.pixelLeft < rightboundary)
themenu.pixelLeft += 5
else if (document.layers && themenu.left < rightboundary)
themenu.left += 5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine() {
if (document.all && themenu.pixelLeft > leftboundary)
themenu.pixelLeft -= 5
else if (document.layers && themenu.left > leftboundary)
themenu.left -= 5
else if (window.drawit)
clearInterval(drawit)
}
</script>
</body>
</html>
评论（0）
登录 后参与评论。