การทำ Floating Menu จัดทำโดย : เว็บไทยดีดี พิมพ์
 แสดง Loading ที่ Status Bar

บทความนี้การทำ 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/

คุณอาจสนใจ
การใช้งาน ScrollBar Component
Mr.GuruZ (53,912 - 04 มิ.ย. 49)
MSN block Checker ใครบล๊อกเราสามารถเช็คได้
เว็บไทยดีดี (69,852 - 10 พ.ค. 51)
โครงสร้างและการใช้งาน Method
Mr.POP (58,183 - 05 พ.ย. 49)
วิธีการทำงานของเมล์แบบ SMTP
เว็บไทยดีดี (14,488 - 29 ก.ย. 50)
Rectangular Marquee (M)
Mr.GuruZ (81,330 - 22 ก.ย. 50)
การใช้งาน Renden แบบ Mental Ray
first (21,080 - 03 พ.ค. 51)
การเปลี่ยน Title ของเว็บเพจ
Mr.GuruZ (50,342 - 04 มิ.ย. 49)
เหตุผลที่คุณควรใช้ไฟร์วอลล์คอมพิวเตอร์
สายลม (15,057 - 19 เม.ย. 51)