วิธีการใช้ประตูบานเลื่อนใน CSS โดยไม่มีแท็บ

Cascading Style Sheets เป็นภาษาของสไตล์ชีทที่เพิ่มสไตล์ให้กับเนื้อหาเว็บที่เขียนในภาษามาร์กอัปเช่น XML, HTML หรือ XHTML เทคนิคประตูบานเลื่อนใน CSS นั้นเกี่ยวกับการสร้างเอฟเฟกต์ไดนามิกโดยใช้ภาพพื้นหลังสองภาพแยกกัน ภาพด้านบนวางเหนือภาพด้านล่างเพื่อสร้างภาพลวงตาโดยไม่ปิดบังภาพด้านล่าง เคล็ดลับในการใช้เทคนิคประตูบานเลื่อนที่ไม่มีแท็บคือการสร้างองค์ประกอบการนำทางแบบข้อความโดยใช้รายการที่ออกแบบด้วย CSS

1

เริ่มต้นด้วยการสร้างรายการที่ไม่มีการเรียงลำดับขององค์ประกอบการนำทางของคุณอยู่ในแท็ก“ DIV” ตัวอย่างเช่น:

• โฮมเพจ
• ผลิตภัณฑ์และบริการ
• ติดต่อเรา

ในตัวอย่างนี้รายการมีแท็ก anchor และ span แท็กจุดยึดใช้แอตทริบิวต์“ href” เพื่อเชื่อมโยงไปยังตำแหน่งเฉพาะขององค์ประกอบการนำทาง นอกจากนี้ยังใช้แท็กเพื่อควบคุมลักษณะของข้อความภายในองค์ประกอบการนำทาง

2

เพิ่มสไตล์ให้กับองค์ประกอบการนำทางโดยการกำหนดสีพื้นหลังเปิดใช้งานลอยระบุระยะขอบการตั้งค่ามากเกินไปเป็นอัตโนมัติและปิดการใช้งานรูปแบบรายการสำหรับรายการ Float เป็นคุณสมบัติ CSS ที่ช่วยให้องค์ประกอบเลื่อนไปทางซ้ายหรือขวาในแนวนอนเพื่อให้องค์ประกอบอื่น ๆ สามารถล้อมรอบได้ คุณสมบัติโอเวอร์โฟลว์กำหนดว่าวัตถุควรทำอย่างไรหากเนื้อหาขยายเกินกล่องสี่เหลี่ยม เมื่อตั้งค่าโอเวอร์โฟลเป็นอัตโนมัติโอเวอร์โฟลว์จะถูกซ่อน แต่อาจมีการเพิ่มแถบเลื่อนเพื่อดูเนื้อหาโอเวอร์โฟลว์

3

ใช้ภาพพื้นหลังที่เลือกกับสไตล์สมอและส่วนขยายเพื่อทำให้เทคนิคประตูบานเลื่อนเสร็จสมบูรณ์และสร้างเอฟเฟกต์โฮเวอร์สำหรับองค์ประกอบการนำทาง