popup menu เป็นเรื่องจำเป็นสำหรับเว็บไซต์ที่มีเมนูย่อยเยอะๆ เพราะว่าถ้าจับเอาเมนูมาวางเรียงแถวกัน คงจะกินพื้นที่มิใช่น้อยๆ เพราะฉนั้นซ่อนมันไว้ซะเลย ก็เลยกลายเป็นเรื่อง MouseOut พอเอาเมาว์ไปชี้ก็ค่อยให้มันโผล่ขึ้นมาให้เลือกก็แล้วกัน ก็เลยกลายเป็นเรื่อง MouseOver Let's go....
สิ่งที่ต้องใช้
เริ่ม....
สร้างไฟล์ ie.css, style.css, menupopup.php
นำเข้าไฟล์ jquery.js, ie.css, style.css กันก่อน
ไฟล์ menupopup.php
เอาแค่นี้ก่อนเดี๋ยวไฟล์ ie.css เราจะเพิ่มเติมทีหลัง....
จากนั้นก็สร้างลิสเมนูขึ้นมาดังนี้
-
Test Menu 1
-
Fruit Menu 2
ต่อไปก็ไปกำหนดสไตล์ ให้กับเมนูกันก่อนดังนี้
ไฟล์ style.css
body{
font-size: 14px;
}
#leftmenu{
width:130px;
padding:0;
list-style:none;
margin:0px;
}
#leftmenu li{
background:#ddd;
height: 20px;
list-style:none;
padding-top:2px;
padding-left:5px;
cursor: default;
margin:1px;
}
.menu{
display: none;
position: absolute;
padding:0;
margin-top:-15px;
margin-left:123px;
width:150px;
}
.menu li a{
padding:0px 10px 0px 10px;
height:20px;
list-style:none;
color:#000000;
text-decoration: none;
}
#more{
float: right;
margin-top:5px;
}
#fruit img{
border:1px solid #999;
}
#fish img{
border:1px solid #999;
}
ข้อสังเกตุตรง .menu กำหนดให้ display: none; ตรงนี้เป็นการกำหนด css ให้ซ่อน
class="menu" นั่นเอง
จากนั้นก็เขียนโค้ด javascript ดังนี้
ไฟล์ menupopup.php
ตอนนี้ถ้าท่านเปิดดูด้วย firefox หรือ chrome ก็ไม่มีปัญหาอะไรแต่ถ้าท่านเปิดด้วย ie ก็จะ
เห็นแบบนี้
นี่ละปัญหาความแตกต่างของบราวเซอร์ มาถึงตรงนี้อย่างที่ผมบอก งานนี้มี Hack ก็ถึงเวลาแล้ว นั่นก็คือ
hack CSS นั่นเอง เราจะกำหนดให้ ie เท่านั้นที่จะสามารถใช้ไฟล์ ie.css ต่อไปนี้ได้ ด้วยวิธีการนำ
เข้ารูปแบบนี้ ให้ท่านเพิ่มเติมส่วนนี้เข้าไประหว่าง tag head
ไฟล์ menupopup.php
จากนั้นก็กำหนด css ดังนี้
ไฟล์ ie.css
.menu{
display: none;
position: absolute;
padding:0px;
margin-top:5px;
margin-left:47px;
width:150px;
}
#more{
float:right;
margin-top:-15px;
}
เมื่อเปิดดูด้วย ie อีกทีก็ยังมีปัญหาอีกตามภาพนี้
ปัญหานี้เกิดขึ้นเนื่องจาก ความยาวของตัวอักษรในเมนูหลักมีความยาวไม่เท่ากัน ดังนั้นกำหนด css
เพิ่มเติมดังนี้
ไฟล์ ie.css
#fruit{
margin-left:45px;
}
#fish{
margin-left:48px;
}
ปัญหาที่จะเกิดขึ้นเมื่อเราเคลื่อนย้ายตำแหน่งของเมนูนี้ กับเฉพาะบราวเซอร์ ie เท่านั้น ให้ท่านไปปรับแก้
เฉพาะไฟล์ ie.css
มาถึงตอนนี้ไม่ว่าท่านจะเปิดด้วยบราวเซอร์ตัวใหนก็ดูดีหมด ยัน ie6
บทความนี้ก็ขอจบเพียงเท่านี้..สวัสดีครับ.....
0 ความคิดเห็น:
แสดงความคิดเห็น