繁體中文当前位置: 首页 > 实例教程 > 脚本特效 > 菜单 & 导航 > 左侧可伸缩菜单
菜单 & 导航 中的 左侧可伸缩菜单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-07-27 浏览: 486 ::
收藏到网摘: n/a
第一步：在head区域放入
<style>
#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
#divMenu a{text-decoration:none;}
#divMenu a:hover{color:red;}
</style>
<script language="JavaScript1.2">
ie=document.all?1:0
n=document.layers?1:0
ns6=document.getElementById&&!document.all?1:0
//These are the variables you have to set:
//How much of the layer do you wan't to be visible when it's in the out state?
lshow=60
//How many pixels should it move every step?
var move=10;
//At what speed (in milliseconds, lower value is more speed)
menuSpeed=40
//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true
var ltop;
var tim=0;
//Object constructor
function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' if (n) this.css=eval(nest+'document.'+obj) else if (ns6) this.css=document.getElementById(obj).style else if (ie) this.css=eval(obj+'.style') this.state=1 this.go=0 if (n) this.width=this.css.document.width else if (ns6) this.width=document.getElementById(obj).offsetWidth else if (ie) this.width=eval(obj+'.offsetWidth') this.left=b_getleft this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_getleft(){ if (n||ns6){ gleft=parseInt(this.css.left)} else if (ie){ gleft=eval(this.css.pixelLeft)} return gleft;
}
function moveMenu(){ if(!oMenu.state){ clearTimeout(tim) mIn() }else{ clearTimeout(tim) mOut() }
}
//Menu in
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 }
}
//Menu out
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)+parseInt(ltop) if(n||ns6) setTimeout('checkScrolled()',30)
}
function menuInit(){ oMenu=new makeMenu('divMenu') if (n||ns6) scrolled="window.pageYOffset" else if (ie) scrolled="document.body.scrollTop" oMenu.css.left=-oMenu.width+lshow if (n||ns6) ltop=oMenu.css.top else if (ie) ltop=oMenu.css.pixelTop oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
//Initing menu on pageload
window.onload=menuInit;
</script>
在</body>上加入
<div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
<nobr> <a href="http://www.dynamicdrive.com">Dynamic Drive</a> - <a href="http://www.codingforums.com">Coding Forums</a> - <a href="http://active-x.com/">Active-X.com</a> - <a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a>
</nobr>
</div>
评论 (0) All
