สามารถสร้างเมนูแบบเลื่อนลงที่ดีได้ ไม่เพียงแต่ใน JavaScript แต่ยังใช้แท็ก HTML มาตรฐานอีกด้วย วิธีการสร้างเมนูแบบเลื่อนลงนี้จะเป็นประโยชน์สำหรับผู้ที่เพิ่งเริ่มขั้นตอนแรกในการสร้างไซต์และต้องการลดความซับซ้อนในการสร้างเมนูบนหน้าเว็บ
คำแนะนำ
ขั้นตอนที่ 1
ในโค้ด HTML เมนูดังกล่าวเป็นรายการที่ไม่เรียงลำดับโดยมีรายการที่ซ้อนกันอยู่ภายใน ในการเริ่มต้น ให้สร้างไฟล์ style.css และคัดลอกโค้ด CSS ต่อไปนี้เพื่อจัดรูปแบบและจัดรูปแบบเมนู:
#nav, #nav ul {
รายการสไตล์: none;
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 1px ของแข็ง # 000;
พื้นหลัง: # 515151;
ลอย: ซ้าย;
ความกว้าง: 100%;
}
#นำทางลี{
ลอย: ซ้าย;
ตำแหน่ง: ญาติ;
สีพื้นหลัง: # 003366;
หลัง / พื้นดิน: ไม่มี;
}
#นำทางลิอุล{
แสดง: ไม่มี;
ตำแหน่ง: สัมบูรณ์;
สีพื้นหลัง: # 003366;
ช่องว่างภายใน: 8px 0;
ความกว้าง: 138px;
}
ขั้นตอนที่ 2
ตอนนี้เราต้องเพิ่มการตกแต่งให้กับรายการเมนู กำหนดความกว้างและความสูง ลบเส้นขีดเส้นใต้ กำหนดความกว้างที่ชัดเจนสำหรับแต่ละลิงก์ และระบุสีพื้นหลังที่ต้องการ
ขั้นตอนที่ 3
สำหรับการเปลี่ยนแปลงทั้งหมดเหล่านี้ ให้เพิ่มรหัสต่อไปนี้ในไฟล์:
#นำทาง {
สี: #ffff;
ตกแต่งข้อความ: ไม่มี;
แสดง: บล็อก;
ความกว้าง: 120px;
ช่องว่างภายใน: 4px 10px;
พื้นหลังสี: # 003366 ทำซ้ำ -y ถูกต้อง;
}
#nav a: โฮเวอร์ {
สี: # 000;
พื้นหลังสี: # 0033FF;
}
#nav li: โฮเวอร์ {
สีพื้นหลัง: # 333333;
}
จากนั้นเพิ่มโค้ดต่อไปนี้เพื่อสิ้นสุดเมนู:
#nav li: เลื่อน li ul {
แสดง: ไม่มี;
ความกว้าง: 138px;
ด้านบน: -9px;
ซ้าย: 133px;
}
#nav li: เลื่อน li: เลื่อน ul {
แสดง: บล็อก;
}
ขั้นตอนที่ 4
ในเวอร์ชัน HTML รายการเมนูที่ไม่เรียงลำดับทั่วไปจะมีลักษณะดังนี้ - โดยพื้นฐานแล้ว เมนูจะถูกสร้างขึ้นซึ่งถูกกล่าวถึงในบทความ
- บ้าน
-
แคตตาล็อก
-
สินค้าทั้งหมด
- ตามวันที่
- ผู้ผลิต
- อื่นๆ
-