ด้วยความช่วยเหลือของโค้ด HTML ที่ดีและกฎ CSS แบบง่าย คุณสามารถสร้างเมนูป๊อปอัปที่ดีซึ่งสามารถแก้ไขและเสริมได้อย่างง่ายดาย ด้วยการใช้ภาษามาร์กอัปและ Cascading Style Sheets คุณสามารถมั่นใจได้ว่าเมนูทำงานอย่างถูกต้องในทุกเบราว์เซอร์
คำแนะนำ
ขั้นตอนที่ 1
ขั้นแรก สร้างโครงสร้างพื้นฐานของเมนูของคุณ เปิดตัวแก้ไขข้อความและสร้างรายการลำดับเลขด้วยเมนูย่อยที่ทำหน้าที่เป็นรายการหลัก ตัวอย่างเช่น:
-
องค์ประกอบแรก
- รายการดรอปดาวน์
- ดรอปดาวน์2
ขั้นตอนที่ 2
บันทึกรายการที่สร้างขึ้นในไฟล์ html แยกต่างหาก จากนั้น สร้างไฟล์ที่มีนามสกุล.css และป้อนพารามิเตอร์ของสไตล์ชีตทั้งหมด
ขั้นตอนที่ 3
ลบช่องว่างภายในและสัญลักษณ์แสดงหัวข้อย่อยที่ใช้ในรายการสัญลักษณ์แสดงหัวข้อย่อยและตั้งค่าความกว้างของเมนูโดยใช้เครื่องมือ CSS: ul {list-style: none;
ความกว้าง: 200px; }
ขั้นตอนที่ 4
กำหนดตำแหน่งสัมพัทธ์ของรายการทั้งหมดในรายการโดยใช้แอตทริบิวต์ position: ul li {ตำแหน่ง: ญาติ; }
ขั้นตอนที่ 5
ถัดไป คุณต้องออกแบบเมนูย่อย แต่ละองค์ประกอบจะปรากฏทางด้านขวาของเมนูหลักในขณะที่ตัวชี้เมาส์อยู่บนรายการ: li ul {ตำแหน่ง: สัมบูรณ์;
ซ้าย: 199px;
ด้านบน: 0;
แสดง: ไม่มี; } คุณลักษณะด้านซ้ายน้อยกว่าความกว้างของเมนูหนึ่งพิกเซล ซึ่งช่วยให้วางตำแหน่งรายการป๊อปอัปได้อย่างชาญฉลาดโดยไม่ต้องสร้างเส้นขอบคู่ แอตทริบิวต์ display ใช้เพื่อซ่อนเมนูย่อยเมื่อเปิดหน้า
ขั้นตอนที่ 6
จัดรูปแบบลิงก์ตามต้องการโดยใช้ตัวเลือก css ที่เหมาะสม รวมพารามิเตอร์ display: block เพื่อให้แต่ละลิงก์ใช้พื้นที่ทั้งหมดที่สงวนไว้
ขั้นตอนที่ 7
ในการทำให้เมนูปรากฏขึ้นในขณะที่เคอร์เซอร์อยู่เหนือมัน (โฮเวอร์) คุณต้องป้อนรหัส: li: hover ul {display: block; }
ขั้นตอนที่ 8
ตั้งค่าตัวเลือกเพิ่มเติมสำหรับแสดงลิงค์และรายการตามต้องการ
ขั้นตอนที่ 9
เมนูป๊อปอัปพร้อมแล้ว ตอนนี้ยังคงรวมแอตทริบิวต์ในไฟล์.html: เมนูป๊อปอัป