สร้าง Sitemap ด้วย HTML+CSS3

สำหรับคนที่ทำเว็บและใช้เว็บก็คงจะคุ้นเคยกันดีกับหน้า sitemap ซึ่งโดยปกติก็จะเป็นหน้าที่รวบรวมลิงค์ไปยังทุกๆหน้ามาเรียงกันไว้อย่างมีระบบ สำหรับตัวเราเองเวลาทำเว็บแล้วก็จะทิ้งส่วนนี้ไว้เป็นส่วนสุดท้าย ซึ่งยอมรับเลยว่าบางครั้งไม่อยากทำเท่าไหร่ เพราะมันออกแนวน่าเบื่อและสำหรับหลายๆงานมันก็ไม่ได้อยู่ใน requirement ด้วยซ้ำ แต่ก็ต้องทำเพราะเป็นส่วนที่ควรจะทำ ซึ่งเวลาทำเข้าจริงๆแล้วก็ไม่พ้นต้องใช้ unordered list ไปเรื่อยๆ เหตุผลเพราะมันง่ายที่สุด แต่ผลลัพท์ที่ได้ออกมาก็ไม่ได้สวยงามเลยซักนิด

วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้

 

โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง ว่าไปเยอะแล้ว มาดูโค้ทบ้าง

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

ในส่วนของ HTML ก็จะใช้ unordered list ตามปกติ สามารถใส่ซ้อนกันไปได้เรื่อยๆ เช่น

จากนั้นในส่วนของ css ก็จะเขียนให้มาควบคุมการแสดงผล โดยนอกจาก css แล้วยังได้ใช้รูป gif อีกทั้งหมด 4 รูปเพื่อให้ลากเส้นของโครงสร้างต้นไม้ ดังนี้

 

แค่นี้ก็ได้ sitemap ง่ายๆ โดยไม่ต้องเสียเวลาไปกับมันมากอีกต่อไป!

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

1 Comment

  1. พอดีผมเพิ่งเริ่มหัดเขียนเว็บ เลยสงสัยว่า Sitemap นี่จำเป็นหรือเปล่าครับ ถ้ามีคนมาจ้างให้เราเขียนเว็บ มีความสำคัญยังไง แล้วถ้าเขียน ควรจะไปวางไว้ตรงไหน ขอบคุณครับสำหรับข้อมูลดีๆ ที่แบ่งปัน

Leave a Comment

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