点击自动收缩的菜单

2009-11-23 导航菜单 252℃

<html>
<head>
<title>自动收缩的菜单</title>
</head><body link="#000000">

<script language="JavaScript1.2">
ie=document.all?1:0
n=document.layers?1:0
lshow=60
var move=10;
menuSpeed=40
var moveOnScroll=true
var tim;
var ltop;
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.state=1
this.go=0
this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
this.left=b_getleft
this.obj = obj + "Object";         eval(this.obj + "=this")
}
function b_getleft(){
var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
return gleft;
}
function moveMenu(){
if(!oMenu.state){
clearTimeout(tim)
mIn()
}else{
clearTimeout(tim)
mOut()
}
}
function mIn(){
if(oMenu.left()>-oMenu.width+lshow){
oMenu.go=1
oMenu.css.left=oMenu.left()-move
tim=setTimeout("mIn()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=1
}
}
function mOut(){
if(oMenu.left()<0){
oMenu.go=1
oMenu.css.left=oMenu.left()+move
tim=setTimeout("mOut()",menuSpeed)
}else{
oMenu.go=0
oMenu.state=0
}
}
function checkScrolled(){
if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
if(n) setTimeout('checkScrolled()',30)
}
function menuInit(){
oMenu=new makeMenu('divMenu')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.left=-oMenu.width+lshow
ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
onload=menuInit;
</script>
<div id="divMenu" style="position: absolute; top: 163; left: 35; width: 173; visibility: hidden; background-color: ccccff; height: 19"><nobr>
<a href="#">图片</a>-
<a href="#">字体</a>-
<a href="#">下载</a>-
<a href="#">素材</a>-
<a href="#">综合</a>-
--  <a style="background-color: blue; text-decoration: none" href="javascript://" onclick="moveMenu()">导航菜单</a></nobr></div>
</body></html>

相关特效代码

热门特效代码: 三级竖向展开/收缩导航菜单; 鼠标指向弹出菜单; jQuery 弹出菜单层; CSS二级下拉导航菜单; CSS做的垂直导航菜单效果; 横向二级导航菜单; 仿google首页下端图片文字动画导; 导航链接菜单间隔闪烁; 动态翻滚的导航条[酷比flash]; 纯CSS的三级联动级联菜单

推荐特效代码: CSS+div+js组合强大实现超酷菜单; 动态翻滚的导航条[酷比flash]; CSS横向下拉菜单; 微软风格的CSS横向菜单; 立体的CSS按钮菜单效果; 左侧隐藏的菜单