<script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com */ /****************************************************** Focus Slide version 1.0 last revision: 12.17.2004 steve@slayeroffice.com Should you improve upon or modify this code, please let me know so that I can update the version hosted at slayeroffice. PLEASE LEAVE THIS NOTICE INTACT! ******************************************************/ var d=document; // shortcut reference to the document object var activeLI = 0; // the currently "active" list element - value represents its index in the liObj array var zInterval = null; // interval variable var SLIDE_STEP = 8; // how many pixels to move the sliding div at a time var SLIDER_WIDTH = 74; // the width of the sliding div. used to calculate // its left based on the width and left of the active LI element function init() { // bail out if this is an older browser or Opera which gets the offsets wrong // the opera issue is fixable by subtracting the container UL's width from the // offsetLefts...but I don't care enough to do it // this does NOT break opera, it just wont get the sliding thing if(!document.getElementById || window.opera)return; // create references to the LI's mObj = d.getElementById("mContainer"); liObj = mObj.getElementsByTagName("li"); // set up the mouse over events for(i=0;i<liObj.length;i++) { liObj[i].xid = i; liObj[i].onmouseover = function() { initSlide(this.xid); } } // create the slider object slideObj = mObj.appendChild(d.createElement("div")); slideObj.id = "slider"; // position the slider over the first LI x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5; y = liObj[activeLI].offsetTop-3; slideObj.style.top = y + "px"; slideObj.style.left = x + "px"; } function initSlide(objIndex) { // return if the user is mousing over the currently active LI if(objIndex == activeLI)return; // clear the interval so we can start it over in a few lines to avoid doubling up on intervals clearInterval(zInterval); // set the active list item to the object index argument activeLI = objIndex; // figure out the destination for the sliding div element destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5; // start the interval intervalMethod = function() { doSlide(destinationX); } zInterval = setInterval(intervalMethod,10); } function doSlide(dX) { // get the current left of the sliding div x = slideObj.offsetLeft; if(x+SLIDE_STEP<dX) { // div is less than its destination, move it to the right x+=SLIDE_STEP; slideObj.style.left = x + "px"; } else if (x-SLIDE_STEP>dX) { // div is more than its destination, move to the left x-=SLIDE_STEP; slideObj.style.left = x + "px"; } else { // div is within the boundaries of its destination. put it where its supposed to be // and clear the interval slideObj.style.left = dX + "px"; clearInterval(zInterval); zInterval = null; } } // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { init(); }); </script> <style> #mContainer { position:relative; margin:0 auto; width:404px; // ตั้งค่าความกว้างของ MENU ที่ตรงนี้ height:25px; // ตั้งค่าความสูงของ MENU ที่ตรงนี้ border-top:1px solid #638DA1; border-bottom:1px solid #638DA1; background-color:#F2F5F6; padding:5px 0 0 0; z-index:0; } #mContainer li { position:relative; display:inline; margin:0 10px 0 12px; font:0.8em arial,verdana; padding:0; z-index:20; } #mContainer li a { text-decoration:none; color:#638DA1; } #slider { position:absolute; background-color: #98B4C1; border:1px solid #78919B; width:74px; // ตั้งค่าความกว้างของ SLIDER ที่ตรงนี้ height:20px; // ตั้งค่าความสูงของ SLIDER ที่ตรงนี้ padding:0; z-index:1; } </style>

<!-- การเพิ่ม / ลบ / แก้ไข MENU ทำที่ด้านล่าง --> <!-- ส่วนการแก้ไขขนาดของ MENU และตัว SLIDER ทำที่ตัว <style> ในส่วนด้านบนนะครับ ที่เขียนอธิบายอยู่--> <ul id="mContainer"> <li><a href="#" title="Item One">Item One</a></li> <li><a href="#" title="Item Two">Item Two</a></li> <li><a href="#" title="Item Three">Item Three</a></li> <li><a href="#" title="Item Four">Item Four</a></li> <li><a href="#" title="Item Five">Item Five</a></li> </ul>