การทำ 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/

คุณอาจสนใจ
การทำ Poll ตอนที่ 5 (การสร้างหน้า Vote และหน้าแสดงผล)
Mr.GuruZ (49,240 - 03 มิ.ย. 49)
การใช้งาน ScrollBar Component
Mr.GuruZ (53,873 - 04 มิ.ย. 49)
สร้างพื้นหลังแบบ Matrix
langjuko (179,347 - 08 ต.ค. 51)
การเพิ่มศูนย์หน้าเลขหลัก
Mr.GuruZ (56,749 - 02 ก.ค. 49)
เราสามารถใช้ประโยชน์อะไรได้บ้างจากการใช้อินเทอร์เน็ตความเร็วสูง ADSL
เว็บไทยดีดี (21,561 - 25 ส.ค. 50)
การใช้ฟังก์ชัน count
nut (124,342 - 02 ก.ค. 49)
การทำ List/Menu จากฐานข้อมูล
first (98,065 - 11 ก.พ. 51)
การกำหนดขอบเขตการพิมพ์งานบน excel
langjuko (76,391 - 20 ต.ค. 51)