当前位置：开发者网络 >> 网页特效 >> 页面导航 >> 内容
精彩推荐
分类最新特效
分类热点特效
  
简单而悦目的在网页上角位的导航菜单
日期：2005-06-09   人气：   【字体：大 中 小】【收藏此文】

<!-- 网页特效代码由[中国WEB开发者网络:http://www.ChinaWebDev.com]提供！ -->
<!-- 要实现此效果需要 2 个步骤： -->

<!-- 第 1 步： -->
<!-- 把下面的代码加到<HEAD></HEAD>区域中： -->

<style>
<!--

#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>



<!-- 第 2 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->

X键弹出菜单栏，Z键关闭菜单栏
<script language="JavaScript1.2">

/*
Sliding Menu Bar Script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function showtip(nulling){
if (document.all){
if (nulling==0&&slidemenubar2.style.pixelLeft==-150)
slidemenubar2.title='Press "x" to expand the menu, "z" to contract it'
else
slidemenubar2.title=''
}
else if (document.layers){
if (nulling==0&&!window.pullit)
window.status='Press "x" to expand the menu, "z" to contract it'
else
window.status=''
}
}
if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="showtip(0)" onMouseout="showtip(1)">')
</script>
<layer id="slidemenubar" onMouseOver="showtip(0)" onMouseOut="showtip(1)">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()

//extend or shorten this list
sitems[0]="这里填显示信息"
sitems[1]="这里填显示信息"
sitems[2]="这里填显示信息"
sitems[3]="这里填显示信息"
sitems[4]="这里填显示信息"
sitems[5]="这里填显示信息"
sitems[6]="这里填显示信息"
sitems[7]="这里填显示信息"
sitems[8]="这里填显示信息"
sitems[9]="这里填显示信息"
sitems[10]="这里填显示信息"
sitems[11]="二人世界"
sitems[12]="网页天使"


//These are the links pertaining to the above text.
sitemlinks[0]="这里填连接地址"
sitemlinks[1]="这里填连接地址"
sitemlinks[2]="这里填连接地址"
sitemlinks[3]="这里填连接地址"
sitemlinks[4]="这里填连接地址"
sitemlinks[5]="这里填连接地址"
sitemlinks[6]="这里填连接地址"
sitemlinks[7]="这里填连接地址"
sitemlinks[8]="这里填连接地址"
sitemlinks[9]="这里填连接地址"
sitemlinks[10]="这里填连接地址"
sitemlinks[11]="http://www.webasp.net"
sitemlinks[12]="http://www.webasp.net"

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)
}

if (document.layers)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (document.layers){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (document.all){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>