ออกแบบและใช้งาน Template (ตอนที่ 3)

หลายๆคนอาจเคยเห็นบางเว็บ ที่มีการทำ Highlight เมนูที่กำลังใช้งานหรือแสดงหน้านั้นๆอยู่ให้ต่างไปจากเมนูอื่น เราลองมาปรับปรุง Template ของเราให้สามารถทำ Highlightเมนูที่เลือกได้กัน

ข้อสังเกตุสำหรับโค้ดด้านบน ก็คือ เราได้ย้ายเอาส่วนของ PHP ขึ้นไปไว้ด้านบนสุดของเพจ สำหรับ PHP ในส่วนที่เป็น HTML จะมีแค่ส่วนแสดงผลเท่านั้น เนื่องจากในการออกแบบเว็บไซต์โดยทั่วๆไป เราอาจต้องมีการประมวลผล PHP หรือทำการเตรียมส่วนประกอบต่างๆ ก่อนการแสดงผล เราจึงจำต้องให้ส่วนของ PHP ประมวลผลเสร็จก่อนแล้วค่อยแสดงผล (นี่เป็นเพียงวิธีหนึ่งเท่านั้น ในการใช้งานจริงอุปสรรคที่แต่ละคนพบอาจไม่เหมือนกัน สามารถเลี่ยงไปใช้วิธีที่เหมาะสมสำหรับแต่ละงานได้)

ในการทำ Highlight เมนู หลักการของมันก็แค่ ตรวจสอบว่า โมดูลที่เรียกตรงกับเมนูไหน ถ้าตรงกันก็ให้กำหนด class select ให้กับเมนูนั้นเท่านั้น (ใช้ PHP)

และในเวลาแสดงผลให้เรากำหนด CSS ของเมนูที่มี class เป็น select ให้ต่างจากเมนูปกติ

ซึ่งในที่นี้ได้กำหนดให้เมนูที่เลือกมีพื้นหลังสีขาวและเป็นตัวหนา

ตัวอย่าง