Long Live The King
ข้าพเจ้าไม่ได้มีพรสวรรค์พิเศษอะไร ข้าพเจ้าเพียงแต่มีความกระหายใคร่รู้อยู่เสมอ ทุ่มเทให้กับสิ่งที่อยากรู้ พากเพียรอย่างทรหด และสำรวจวิจารณ์ความรู้ของตัวเองเป็นประจำ ปัจจัยเหล่านี้คือที่มาของแนวคิดต่างๆ ของข้าพเจ้า .... อัลเบิร์ต ไอน์สไตน์

วันอังคารที่ 15 มกราคม พ.ศ. 2556

Popup menu แนวตั้งอย่างง่ายด้วย jQuery, CSS งานนี้มี Hack...



popup menu เป็นเรื่องจำเป็นสำหรับเว็บไซต์ที่มีเมนูย่อยเยอะๆ เพราะว่าถ้าจับเอาเมนูมาวางเรียงแถวกัน คงจะกินพื้นที่มิใช่น้อยๆ เพราะฉนั้นซ่อนมันไว้ซะเลย ก็เลยกลายเป็นเรื่อง MouseOut พอเอาเมาว์ไปชี้ก็ค่อยให้มันโผล่ขึ้นมาให้เลือกก็แล้วกัน ก็เลยกลายเป็นเรื่อง MouseOver Let's go....

สิ่งที่ต้องใช้

เริ่ม....
สร้างไฟล์ ie.css, style.css, menupopup.php

นำเข้าไฟล์ jquery.js, ie.css, style.css กันก่อน
ไฟล์ menupopup.php


    
    

เอาแค่นี้ก่อนเดี๋ยวไฟล์ ie.css เราจะเพิ่มเติมทีหลัง....

จากนั้นก็สร้างลิสเมนูขึ้นมาดังนี้

ต่อไปก็ไปกำหนดสไตล์ ให้กับเมนูกันก่อนดังนี้
ไฟล์ 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 ความคิดเห็น:

แสดงความคิดเห็น

© Bookneo, AllRightsReserved.

ขับเคลื่อนโดย Blogger Designed by Nikhorn Thongchuay