มีสมาชิกมาช่วยเตือนผมเรื่องเขียน
CSS Dock Menu ที่อยู่บน mac OS แบบที่เด็กไอทีคลับใช้อยู่ บางท่านเรียกว่า
Navigator ก็ไม่ผิดครับ
จริงๆแล้ว code นี้มีมานานแล้วครับ เกือบ 2 ปีแล้วนะ เท่าที่ผมจำได้ เพราะเคยโหลดไว้นานแล้ว แต่ไม่ได้เอามาใช้งาน
จนมีในยุคของ WEB2.0 ต่อมาีมี
jQuery ที่ทำให้อะไรๆ ดูง่ายขึ้น ผมเลยถือโอกาสได้เอามาลงลองให้ใช้กันซักที
มาเริ่มขั้นตอนกันดีกว่า
1. Download โค๊ดได้จากลิ้งด้านล่างนี้ครับDownload the CSS dock menu zip package. 
2. นำโค๊ดที่ได้ไปใส่โค๊ดด้านล่างนี้เอาไปใส่ในส่วนของ <head> ..... </head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]?>
โค๊ดชุดแรกเป็น javaScript , ชุดที่สองเป็น CSS Style Sheet , และโค๊ดชุดสุดท้าย ใช้สำหรับแสดงภาพโปรงใสใน IE 6 ครับ (ผมบอกแล้วให้เลิกใช้ IE6 เพราะมันสร้างความลำบากให้นักพัฒนาเว็บไซต์)
3. การตั้งค่าโค๊ดต่อไปนี้ เอาใส่ไว้ใน <body> นะครับ
<script type="text/javascript">
$(document).ready(
function()
{
$(?#dock2?).Fisheye(
{
maxWidth: 60,
items: ?a?,
itemsText: ?span?,
container: ?.dock-container2?,
itemWidth: 40,
proximity: 80,
alignment : ?left?,
valign: ?bottom?,
halign : ?center?
}
)
}
);
</script>
หากต้องการให้เมนูอยู่ด้านบน ใส่โค๊ดนี้ครับ (note: span tag ต้องอยู่หลัง img tag นะครับ)
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
หากต้องการให้เมนูอยู่ด้านล่าง ใส่โค๊ดนี้ครับ (note: span tag ต้องอยู่หลัง img tag นะครับ)
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
ทดสอบบน IE 6, IE 7, IE 8, Opera 9, Firefox 2, Firefox 3, and Safari 2 (although there are some minor rendering issues with Safari).
ตัวอย่าง
http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html ลอง ViewSource ดูเว็บตัวอย่างจะทำให้เข้าใจมากขึ้นครับ
หวังว่าจะนำไปต่อยอดกันได้ ไม่มากก็น้อยนะครับ มีข้อสงสัย สอบถามหรือติชมได้นะครับ
