左側動畫展開的輔助菜單_菜單導航特效

平時隱躲在瀏覽器左側，當點擊的時候它會動畫慢慢展開，再次點擊則封閉，可以用作你網站的輔助導航效果。這里只是進行了簡單美化，意在展示功能，想用本代碼的朋友可以自己美化哦。

<html>
<head>
<title>左側動畫展開的菜單</title>
<style>
body{
font-size:9pt;
}
#divMenu{
padding:8px;
}
</style>
</head>
<body>
<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:80; left: 10; width: 180; visibility: hidden; background-color: skyblue; height: 20"><nobr>
<a href="http://www.zhaotila.cn">模板無憂</a>-
<a >百度搜索</a>-
<a >新浪新聞</a>-
<a >百度空間</a>-
<a href="#">我的博客</a>-
<a href="javascript://" onclick="moveMenu()">輔助導航</a></nobr></div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2012-11-05

[收藏][報錯][返回列表]

相關菜單導航特效：

左側動畫展開的輔助菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些