เมนูนี้ใช้เพื่ออำนวยความสะดวกในการนำทางของผู้ใช้ผ่านส่วนต่างๆ ของไซต์ เพื่อดึงดูดความสนใจของผู้เข้าชม เมนูควรจะใช้งานได้ ใช้งานง่าย และในขณะเดียวกันก็รวมเข้ากับการออกแบบของทรัพยากรทั้งหมด
คำแนะนำ
ขั้นตอนที่ 1
ก่อนสร้างเมนู ให้เลือกประเภท คุณสามารถสร้างกล่องดรอปดาวน์แนวนอนหรือแนวตั้งที่จะแสดงให้ผู้ใช้เห็นเมื่อผู้ใช้วางเคอร์เซอร์เมาส์ไว้เหนือช่องนั้น เมื่อเลือกเมนูใดเมนูหนึ่ง คุณจะได้รับคำแนะนำว่าผู้เข้าชมใช้งานสะดวกเพียงใดและจะรวมเข้ากับการออกแบบอย่างไร
ขั้นตอนที่ 2
หลังจากเลือกประเภทเมนูแล้ว ให้เปิดไฟล์เพจของคุณโดยใช้โปรแกรมแก้ไขข้อความที่คุณใช้เพื่อแก้ไข HTML ไปที่ส่วนโค้ดที่ต้องการซึ่งคุณต้องการแทรกองค์ประกอบอินเทอร์เฟซของคุณ
ขั้นตอนที่ 3
หลังจากนั้น ให้สร้างรายการตัวเลือกโดยสร้างบล็อกและสร้างรายการลำดับเลขด้วยรหัสที่กำหนด ตัวอย่างเช่น:
- ลิงค์ 1
- ลิงค์2
- ลิงค์ 3
ในตัวอย่างนี้ ฉันสร้างรายการสัญลักษณ์แสดงหัวข้อย่อยของสามองค์ประกอบ และวางไว้ในเลเยอร์ div ด้วย ID แผง ID
ขั้นตอนที่ 4
ไปที่บล็อกส่วนของหน้าของคุณ และสร้างเมนูสไตล์ชีตแบบเรียงซ้อนที่เหมาะสม หากคุณต้องการสร้างเมนูแนวนอน คุณสามารถรวมแอตทริบิวต์อินไลน์สำหรับรายการผลลัพธ์:
#panel ul li {แสดง: อินไลน์; }
ขั้นตอนที่ 5
ในการสร้างเส้นแนวนอนตลอดความยาวของหน้า คุณสามารถใช้รหัสต่อไปนี้:
#panel ul {ระยะขอบซ้าย: 0; ช่องว่างภายใน: 2px 0; }
ขั้นตอนที่ 6
จากนั้นคุณสามารถแบ่งภาพออกเป็นสี่เหลี่ยมได้:
#panel ul li a {ขอบซ้าย: 3px; เส้นขอบ: 1px; ช่องว่างภายใน: 2px 3px; พื้นหลัง: สีน้ำเงิน; }
รหัสนี้ตั้งค่าการเยื้องข้อความจากองค์ประกอบเส้นขอบผ่านแอตทริบิวต์ระยะขอบซ้ายและช่องว่างภายใน และยังตั้งค่าสีพื้นหลังสำหรับแต่ละรายการด้วย ในตัวอย่างนี้ สีคือสีน้ำเงิน แต่คุณสามารถเปลี่ยนได้ตามดุลยพินิจของคุณเอง
ขั้นตอนที่ 7
หากต้องการชี้ไปที่รายการในหน้าปัจจุบันที่เลือกในแท็บ ให้ตั้งค่าพารามิเตอร์ที่เหมาะสมเป็นคลาสที่เปิดอยู่:
#menu ul li a # เปิด {พื้นหลัง: สีแดง; ขอบล่าง: 1px; }
หน้าปัจจุบันที่เลือกในแผงจะแสดงเป็นสีแดง
ขั้นตอนที่ 8
บันทึกการเปลี่ยนแปลงลงในไฟล์และตรวจสอบการทำงานของโค้ดที่เขียนโดยเปิดหน้าเว็บของคุณผ่านเบราว์เซอร์ ในการตั้งค่าตัวเลือกการแสดงผลเพิ่มเติม คุณสามารถเพิ่ม CSS หรือ HTML เพื่อเพิ่มรูปลักษณ์ของวัตถุได้ตลอดเวลา