CSS Horizontal Navigation หรือ การทำ CSS menu แบบ Dropdown

เรื่องมันมีอยู่ว่า ทำไม มันใช้ได้ กับการเขียน CSS Dropdown Navigation แบบนี้ เพราะก่อนหน้านี้ ผมก็เคยลองเขียนตาม ทฤษฎีและ Module ของ CSS ที่ W3C มีมาให้ทุกอย่าง มันก็แสดงผลไม่ถูกต้อง กับบราวเซอร์ อย่าง IE7 หรือ IE8

แต่ เมื่อสองสามวันที่ผ่านมา ผมลองเขียนดูอีกที "มันดันใช้ได้ ไม่มีปัญหา"

CSS Dropdown navigation

สำหรับคนที่เคยลองเขียน CSS Dropdown Menu มาแล้วคงจะเจอปัญหาที่มันเกิดขึ้นกับ IE7 หรือ IE8 เพราะ เมื่อเวลาที่เรา เอาเมาส์ ไป :hover ที่ <li> ซึ่งเป็น Nest Element ของ <ul> แล้ว มันโผล่ออกมา แต่พอเอาเมาส์เลื่อนไปจะไปคลิ๊กที่ลิงค์ มันดันหายไปก่อนที่เราจะได้คลิ๊กที่ ลิงค์ ตามที่เราต้องการ

ซึ่ง บราวเซอร์ อื่นๆ ที่ไม่ใช่ตระกูล IE ไม่เป็น เป็นอยู่เจ้าเดียวนี่แหละ ก็เลย เป็นอันว่า มันคือ บั๊กของ IE แต่ตอนนี้ มันใช้ได้แล้ว

ลองไปดูตัวอย่างกันก่อน

ตัวอย่าง CSS Navigation หรือ การทำ CSS menu แบบ Dropdown

ผมขออนุญาต ว่ากันสั้นๆ สำหรับเรื่องนี้นะครับ จากโค้ด CSS

จากโค้ด CSS ด้านบน จะเห็นได้ว่า ส่วนสำคัญมันอยู่ที่

ซึ่ง เป็นการสั่ง ul ทั้งสองตัวที่เป็น Dropdown level 1 และ level 2 นั้น ซ่อนไว้

และเรียกกลับมาโดย Selector ชุดนี้ ซึ่งแปลง property ที่สัง visibility กลับมาให้มีค่าเป็น visible

โค้ด HTML ตามนี้ครับ

ตัวอย่าง CSS Navigation หรือ การทำ CSS menu แบบ Dropdown

ก่อนที่ผมจะเขียนบทความเสร็จ ผมได้ทดลอง หาสาเหตุที่มำให้ IE7 หรือ IE8 แสดงผลเพี้ยน อีกรอบหนึ่ง ผลปรากฎว่า ถ้าหากผมใช้ Substring Matching Attribute Selector ที่เป็น Class ทั้ง IE7 และ IE8 นั้น จะแสดงผลเพี้ยนไปทันที!!

ผมยังไม่ได้ทดลองหาต่อไปว่า ถ้าผมเปลี่ยนมาเป็นการเขียนแบบ Class Selector โดยที่ไม่ใช้ Child Selector เข้าไปผสมด้วยแล้ว จะสามารถใช้ได้หรือเปล่า

ท่านใดที่สนใจ ก็ เอาไปทดลองหาบั๊กของ IE กันต่อได้นะครับ แต่สำหรับคนที่จะนำเอาไปใช้ ก็ เอาตัวนี้ไปใช้ได้เลยเหมือนกัน

ส่วนผม คงมึนไปอีกหลายตลบ เพราะผมไม่สามารถใช้ Class ให้กับ <ul> ที่เป็น Nest นอกสุดได้

สำหรับรูปแบบ การเขียน Selectors ที่ผมเขียนออกมานั้น ไม่ว่าจะเป็น ul[id^="thaicss-nav"] หรือ ul[id|="thaicss-nav"] หรือ ul[id$="horizontal"] ผมไม่ขออธิบายเพิ่มเติม อยากให้คนที่สนใจ ตามไปค้น ไปเสาะหาเพิ่มเติม เอาอีกทอด (และอีกอย่าง ผมเคยเขียนบทความเอาไว้ใน ThaiCSS แล้ว) และอีกอย่าง ผมเพียงแค่อยากทำให้สงสัย และทุกๆคนไปหาคำตอบกันต่อไป เพราะ คำตอบที่มาจากหลายๆ ครั้ง หลายๆ ที่นั้น มันจะฝั่งแน่น นานกว่า ได้จาก ที่ ที่เดียว

มีความสุขกับการใช้ชีวิตครับ

Back to Top

7 Responses to CSS Horizontal Navigation หรือ การทำ CSS menu แบบ Dropdown

  1. anonymous-css

    มันสามารถใช้กับ IE 6 ได้ป่าว ครับ

    Reply

  2. pornantha

    ผมว่า ไม่น่าจะได้นะครับ เพราะขนาดเว็บ ThaiCSS เองเนี่ย ยังไม่รองรับเลย

    T_T
    ขออภัยมา ณ ที่นี้ ด้วยครับ

    Reply

  3. anonymous-css

    :( เสียดายจัง เบื่อไอ้เจ้า IE6 มากๆๆๆ
    ยังไงก็ขอบคุณสำหรับคำตอบครับ

    Reply

  4. pornantha

    ยังไงก็ ลองใช้ IE8.js นี่ดูครับ
    ทำให้ IE น้อยกว่า 7 เป็น IE8 แทน
    http://code.google.com/p/ie7-js/

    Reply

  5. อยากรู้แต่ไม่อยากถาม

    ขอบคุณครับสำหรับบทความ
    ปล. IE6 ไปตายซะ
    http://ripie6.com/

    Reply

  6. cokcok

    คือนำไปใช้แต่ติดปัญหาใน IE 7 เมนูที่เลื่อนลงมา มันจะไปอยู่ใต้ข้อความทำอย่างไรดีครับ ช่วยที่

    Reply

  7. cokcok

    ช่วยทีครับ ใช่ใน IE 7 แล้วเมนูอยู่ใต้ข้อความทำไงดีครับ

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top