บทความนี้การทำ Floating Menu เหมือนกับของ เว็บไทยดีดี กันนะครับซึ่งหลายคงอยากรู้ทำกันยังไง มาทำกันเลยครับ
ขั้นตอนการทำ
1. สร้างไฟล์ demo.html เพื่อใช้ในการทดสอบ Script นะครับ แล้ว copy code ด้านล่างนี้ เอาไว้ที่ tag <body> แต่ให้อยู่ก่อน </body> นะครับ
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table width="150" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Floating Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:3px; margin-bottom:3px;">
<tr>
<td><a href="#">Menu 1</a></td>
</tr>
<tr>
<td><a href="#">Menu 2</a></td>
</tr>
<tr>
<td><a href="#">Menu 3</a></td>
</tr>
<tr>
<td><a href="#">Menu 4</a></td>
</tr>
<tr>
<td><a href="#">Menu 5</a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--END OF EDIT-->
<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 5, //กำหนดว่าให้ห่างจากด้านซ้ายเท่าไหร่
startY = 530; //กำหนดว่าให้ห่างจากด้านล่างเท่าไหร่
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
หลังจาก copy code มาวางไว้ที่ tag <body> แล้วนะครับ จะต้องเหมือนกับ code ด้านล่างนะครับ
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>สุ่มรหัสผ่าน</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table width="130" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:3px; margin-bottom:3px;">
<tr>
<td><a href="#">Menu 1</a></td>
</tr>
<tr>
<td><a href="#">Menu 2</a></td>
</tr>
<tr>
<td><a href="#">Menu 3</a></td>
</tr>
<tr>
<td><a href="#">Menu 4</a></td>
</tr>
<tr>
<td><a href="#">Menu 5</a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--END OF EDIT-->
<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 5,//กำหนดว่าให้ห่างจากด้านซ้ายเท่าไหร่
startY = 530;//กำหนดว่าให้ห่างจากด้านล่างเท่าไหร่
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>
2. หลังจากนั้นเรามาสร้างเมนูภายในว่ามีกี่เมฯุและต้องให้ Link ไปที่ไหนบ้างครับ ในตารางที่อยู่ระหว่าง Script ก็เป็นอันเสร็จเรัยบร้อยครับครับ
<table width="130" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:3px; margin-bottom:3px;">
<tr>
<td><a href="#">Menu 1</a></td>
</tr>
<tr>
<td><a href="#">Menu 2</a></td>
</tr>
<tr>
<td><a href="#">Menu 3</a></td>
</tr>
<tr>
<td><a href="#">Menu 4</a></td>
</tr>
<tr>
<td><a href="#">Menu 5</a></td>
</tr>
</table>
</td>
</tr>
</table>
ข้อมูลจาก : http://www.dynamicdrive.com/