左侧动画展开的辅助菜单

2024-09-05 12:20:09

字体：大中小

来源：转载

供稿：网友

平时隐藏在浏览器左侧，当点击的时候它会动画慢慢展开，再次点击则关闭，可以用作你网站的辅助导航效果。这里只是进行了简单美化，意在展示功能，想用本代码的朋友可以自己美化哦。

<html><head><title>左侧动画展开的菜单</title><style>body{font-size:9pt;}#divMenu{padding:8px;}</style></head><body><script language="JavaScript1.2">ie=document.all?1:0n=document.layers?1:0lshow=60var move=10;menuSpeed=40var moveOnScroll=truevar 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:80; left: 10; width: 180; visibility: hidden; background-color: skyblue; height: 20"><nobr>程序员开发-百度搜索-新浪新闻-百度空间-我的博客-辅助导航</nobr></div></body></html>

上一篇：类似门户网站的CSS双行导航菜单

下一篇：向上展开的多级CSS菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注