ทำ MENU ที่คลิ๊กแล้วมี MENU ยื่นออกมาตามขวางและเลื่อนตาม SCROLLBAR ด้วย

ทำ MENU ที่คลิ๊กแล้วมี MENU ยื่นออกมาตามขวางและเลื่อนตาม SCROLLBAR ด้วย

นำ CODE ด้านล่างไปไว้ที่ <head> ครับ

<style> #divMenu {font-family:Ms sans Serif; font-size:8pt; font-weight:bold} #divMenu a{text-decoration:none;} #divMenu a:hover{color:red;} </style> <script language="JavaScript1.2"> /******************************************************************************** ******************************************************************************** Browsercheck:*/ ie=document.all?1:0 n=document.layers?1:0 // ให้ตั้งค่าความยื่นของ MENU ก่อนจะกด (เลขยิ่งมาก MENU จะยิ่งยื่นครับ) lshow=37 //How many pixels should it move every step? var move=4 // ให้ตั้งค่าความเร็วครับ (เลขยิ่งน้อยยิ่งเร็ว) menuSpeed=4 // ให้คุณตั้งว่าจะให้เลื่อนตาม SCROLLBAR หรือไม่ (ถ้าต้องการใส่ true ถ้าไม่ต้องการใส่ false) 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:oMenu.css.pixelTop; oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } //Initing menu on pageload onload=menuInit; </script>

นำ CODE ด้านล่างไปไว้ที่ <body> ครับ