點擊自動收縮的菜單

2009-11-23 導航菜單 ℃

<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   class="eivkcsl"   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首頁下端圖片文字動畫導; 導航鏈接菜單間隔閃爍; 動態(tài)翻滾的導航條[酷比flash]; 純CSS的三級聯(lián)動級聯(lián)菜單

推薦特效代碼: CSS+div+js組合強大實現(xiàn)超酷菜單; 動態(tài)翻滾的導航條[酷比flash]; CSS橫向下拉菜單; 微軟風格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側隱藏的菜單