橫拉式選單 (隱藏式) 2(頁 1) - javascript、html 語法教學 - 選單類別 - 笨笨網站超級論壇

#1 橫拉式選單 (隱藏 ... - 蛙 (Administrator) 發表於 14-5-2012 17:15

to DynamicDrive.com Copyright (C) 1999 Thomas Brattli @ <A href="http://www.bratta.com">www.bratta.com</A> This script is made by and copyrighted to Thomas Brattli This may be used freely as long as this msg is intact! This script has been featured on <A href="http://www.dynamicdrive.com">http://www.dynamicdrive.com</A> ******************************************************************************** Browsercheck:*/ ie=document.all?1:0 n=document.layers?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
/******************************************************************************** You should't have to change anything below this. ********************************************************************************/ //Defining variables var tim; var ltop;
//Object constructor 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"

} //Get's the top position. function b_getleft(){ var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft); return gleft; } /******************************************************************************** Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick) ********************************************************************************/ 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 } } /******************************************************************************** Checking if the page is scrolled, if it is move the menu after ********************************************************************************/ function checkScrolled(){ if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop if(n) setTimeout('checkScrolled()',30) } /******************************************************************************** Inits the page, makes the menu object, moves it to the right place, show it ********************************************************************************/ function menuInit(){ oMenu=new makeMenu('divMenu') scrolled=n?"window.pageYOffset":"document.body.scrollTop" oMenu.css.left=-oMenu.width+lshow ltop=(n)?oMenu.css.top

Menu.css.pixelTop; oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); }
//Initing menu on pageload onload=menuInit; </script> <div id="divMenu" style="position:absolute; top:30; left:20; width:200; visibility:hidden; background-color:#64D0FE"> <a href="<A href="http://www.bunbun000.com/">http://www.bunbun000.com/</A>">【笨笨網站】</a> - <a href="<A href="http://www.bunbunhk.com/BBS/Discuz/index.php">http://www.bunbunhk.com/BBS/Discuz/index.php</A>">【笨網論壇】</a> - <a href="<A href="http://www.bunbunhk.com/cgi-bin/html/index.htm">http://www.bunbunhk.com/cgi-bin/html/index.htm</A>">【語法測試】</a> -
<a href="<A href="http://www.bunbunhk.com/bg.htm">http://www.bunbunhk.com/bg.htm</A>">【免費資源】</a>
<a href="javascript://" onclick="moveMenu()" style="background-color:yellow;text-decoration:none">MENU</a> </div> 
 
 
 
top:30;
選單位置高低，可更改 
 
width:200; 選單按鈕闊度，可更改
 
 
如連結要另開新頁可將 a href 改為 a target="_blank" href
 
 
如不能顯示語法效果可貼去本站<A href="http://www.bunbun000.com/html/index.htm" target=_blank>語法測試板</A>試看

笨笨網站超級論壇 (綠色版本)