••Free CODE!!!•• แจกโค้ดต่างๆมากมาย *O*

ลำดับตอนที่ #11 : ••CODE!•• แถบเมนูเลื่อนตามสกอบาร์

ตัวอย่าง
(ไปทดลองในมายไอดีดูนะจ๊ะ!)






โค้ดค่ะ

 <style type="text/css">
.outerNav {
    BORDER-RIGHT: 2px outset; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; LEFT: 1px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: 2px outset; POSITION: absolute; TOP: 1px; BACKGROUND-COLOR: #fff6e9
}
.navDiv {
    BORDER-RIGHT: #ffedcf 1px outset; BORDER-TOP: #ffedcf 1px outset; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: bold 8 px Ms Sans Serif; BORDER-LEFT: #ffedcf 1px outset; WIDTH: 137px; CURSOR: default; COLOR: #006db2; PADDING-TOP: 3px; BORDER-BOTTOM: #ffedcf 1px outset; BACKGROUND-COLOR: #fff6e9
}
.navDivH {
    BORDER-RIGHT: #ffedcf 1px inset; BORDER-TOP: #ffedcf 1px inset; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: bold 8 px Ms Sans Serif; BORDER-LEFT: #ffedcf 1px inset; WIDTH: 137px; CURSOR: default; COLOR: black; PADDING-TOP: 3px; BORDER-BOTTOM: #ffedcf 1px inset; BACKGROUND-COLOR: #ffedcf
}

</style> <SCRIPT language=javascript>
var linklist=[
['หน้าหลัก','http://www.codetukyang.cjb.net'],
['THAI FRESH MILK','http://www.geocities.com/thaifreshmilk'],
['thaiwebcreator.com','http://www.thaiwebcreator.com'],
['ZARATAWEB.COM','http://www.zarataweb.com'],
['GAZIB.COM','http://www.gazib.com'],
['NONGKHAIWEB.COM','http://www.nongkhaiweb.com'],
['ENTRANCE.CO.TH','http://www.entrance.co.th'],
['BUG 1113','http://www.bug1113.com'],
['KANTANA.COM','http://www.kantana.com'],
['SANOOK.COM','http://www.sanook.com']
]

/*******************************************************************/

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var t='';

t+=(ns4)?'<layer name="navM" top=0 left=0 width=145 bgcolor="#fff6e9"><table width=145 cellpadding=4 cellspacing=0 border=1>':'<div id="navM" class="outerNav" style="top:0px;">';
t+=(ns4)?'<tr><td align="center" valign="middle" height="20"><div style="font:bold 17px Ms Sans Serif; color:black">Menu</div></td></tr>':
'<div class="navDiv" style="text-align:center; border-width:0px; font-size:17px; color:black">MENU</div>';
for(i=0;i<linklist.length;i++){
if(ns4)t+='<tr><td align="left" valign="middle" height="20"><a href="'+linklist[i][1]+'">'+linklist[i][0]+'</a></td></tr>';
else t+='<div class="navDiv" onmouseover="setClass(this,true)" onmouseout="setClass(this,false)" onmousedown="navTo('+i+')">'+linklist[i][0]+'</div>';
}
t+=(ns4)?'</table></layer>':'</div>';

;

function navTo(n){
document.location.href=linklist[n][1];
}

function setClass(el,isD){
el.className=(isD)?"navDivH":"navDiv";
}

var navEl=(ns4)?document.layers['navM']:(ie4)?document.all['navM']:document.getElementById('navM');

function posNavM(){
var y=(ns4)?navEl.top:parseInt(navEl.style.top);
var sy=(ie4||ie5)?document.body.scrollTop:window.pageYOffset;
if(ns4)navEl.top=((sy-y)/3)+y;
else navEl.style.top=((sy-y)/3)+y+'px';
}

if(ns4)window.onresize=function(){
setTimeout('history.go(0)',400);
}

setInterval('posNavM()',60);

</SCRIPT>

ส่วนที่ไม่ต้องไปแตะไปยุ่งกับมัน(ไม่รู้นะ ถ้าใครเก่งเรื่องโค้ดก็แตะๆมันไปเหอะ)

<style type="text/css">
.outerNav {
    BORDER-RIGHT: 2px outset; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; LEFT: 1px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; BORDER-BOTTOM: 2px outset; POSITION: absolute; TOP: 1px; BACKGROUND-COLOR: #fff6e9
}
.navDiv {
    BORDER-RIGHT: #ffedcf 1px outset; BORDER-TOP: #ffedcf 1px outset; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: bold 8 px Ms Sans Serif; BORDER-LEFT: #ffedcf 1px outset; WIDTH: 137px; CURSOR: default; COLOR: #006db2; PADDING-TOP: 3px; BORDER-BOTTOM: #ffedcf 1px outset; BACKGROUND-COLOR: #fff6e9
}
.navDivH {
    BORDER-RIGHT: #ffedcf 1px inset; BORDER-TOP: #ffedcf 1px inset; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: bold 8 px Ms Sans Serif; BORDER-LEFT: #ffedcf 1px inset; WIDTH: 137px; CURSOR: default; COLOR: black; PADDING-TOP: 3px; BORDER-BOTTOM: #ffedcf 1px inset; BACKGROUND-COLOR: #ffedcf
}

</style>

กับ

/*******************************************************************/

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var t='';

t+=(ns4)?'<layer name="navM" top=0 left=0 width=145 bgcolor="#fff6e9"><table width=145 cellpadding=4 cellspacing=0 border=1>':'<div id="navM" class="outerNav" style="top:0px;">';
t+=(ns4)?'<tr><td align="center" valign="middle" height="20"><div style="font:bold 17px Ms Sans Serif; color:black">Menu</div></td></tr>':
'<div class="navDiv" style="text-align:center; border-width:0px; font-size:17px; color:black">MENU</div>';
for(i=0;i<linklist.length;i++){
if(ns4)t+='<tr><td align="left" valign="middle" height="20"><a href="'+linklist[i][1]+'">'+linklist[i][0]+'</a></td></tr>';
else t+='<div class="navDiv" onmouseover="setClass(this,true)" onmouseout="setClass(this,false)" onmousedown="navTo('+i+')">'+linklist[i][0]+'</div>';
}
t+=(ns4)?'</table></layer>':'</div>';

;

function navTo(n){
document.location.href=linklist[n][1];
}

function setClass(el,isD){
el.className=(isD)?"navDivH":"navDiv";
}

var navEl=(ns4)?document.layers['navM']:(ie4)?document.all['navM']:document.getElementById('navM');

function posNavM(){
var y=(ns4)?navEl.top:parseInt(navEl.style.top);
var sy=(ie4||ie5)?document.body.scrollTop:window.pageYOffset;
if(ns4)navEl.top=((sy-y)/3)+y;
else navEl.style.top=((sy-y)/3)+y+'px';
}

if(ns4)window.onresize=function(){
setTimeout('history.go(0)',400);
}

setInterval('posNavM()',60);

</SCRIPT>

ส่วนที่ต้องแก้

<SCRIPT language=javascript>
var linklist=[
['เขียนอะไำรก็ได้ลงไป','ลิ้งค์ที่ต้องการให้ลิ้งค์ไป'],

['THAI FRESH MILK','http://www.geocities.com/thaifreshmilk'],

['thaiwebcreator.com','http://www.thaiwebcreator.com'],

['ZARATAWEB.COM','http://www.zarataweb.com'],

['GAZIB.COM','http://www.gazib.com'],
]

**อธิบาย**

สีแดง คือ ให้พิมพ์อะไรก็ได้ลงไป พอคลิกก็จะลิ้งค์ไปยังที่อื่น
สีเขียว คือ ลิ้งค์ที่ต้องการให้ลิ้งค์ไป

แต่ถ้าหากใครเห็นว่าแค่ 5 ลิ้งค์มันยังไปพอก็ เติมนี่['พิมพ์อะไรก็ได้ลงไป','ลิ้งค์'],ลงไปท้าย
['GAZIB.COM','http://www.gazib.com'],

แต่อย่าใส่แบบนี้นะ
['GAZIB.COM','http://www.gazib.com'],
]
['พิมพ์อะไรก็ได้ลงไป','ลิ้งค์'],


ต้องใส่แบบนี้
['GAZIB.COM','http://www.gazib.com'],

['พิมพ์อะไรก็ได้ลงไป','ลิ้งค์'],
]





หลังจากเสร็จอะไรเรียบร้อยแล้วก็จะได้ดังโค้ดด้านบนสุด
ไม่เข้าใจตรงไหน อะไรยังไง ก็ไปถามที่ไอดีได้นะคะ



PS. โค้ดนี้จะใช้ได้กับมายไอดีเท่านั้น เพราะฉะนั้นถ้าจะทดลอง กรุณาทดลองกับมายไอดี