เมนูแบบเลื่อนลงบนหน้าเว็บไซต์ใช้เพื่อประหยัดพื้นที่และให้การนำเสนอเชิงตรรกะของโครงสร้างของทรัพยากรบนเว็บ มีหลายวิธีในการใช้องค์ประกอบนี้ หนึ่งในวิธีที่ง่ายที่สุดได้รับด้านล่าง
มันจำเป็น
ความรู้พื้นฐานของภาษา HTML และ CSS CSS
คำแนะนำ
ขั้นตอนที่ 1
โค้ด HTML ของเมนูใช้องค์ประกอบรายการที่ซ้อนกัน (UL และ LI) ซึ่งวางลิงก์ไปยังหน้าต่างๆ ไม่มีโครงสร้างที่ซับซ้อน ไดนามิกถูกใช้งานโดยใช้ CSS ซึ่งเป็นบล็อกคำอธิบายซึ่งวางโดยตรงในซอร์สโค้ดของหน้า ไม่มีอะไรพิเศษเกี่ยวกับเรื่องนี้ นอกจากนี้ ข้อความยังมีคำอธิบายบางอย่างเกี่ยวกับจุดประสงค์ของบล็อกสไตล์บางอย่าง
ขั้นตอนที่ 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
เมนูแบบเลื่อนลง * {
ตระกูลแบบอักษร: Verdana;
ขนาดตัวอักษร: 14px;
} ul, li, {
ช่องว่างภายใน: 0;
แสดง: บล็อก;
เส้นขอบ: 0;
ระยะขอบ: 0;
} ul {
เส้นขอบ: 1px ทึบ #AAA;
ความกว้าง: 150px;
รายการสไตล์: none;
พื้นหลัง: #FFF;
} ลี {
สีพื้นหลัง: #AAA;
ตำแหน่ง: ญาติ;
ดัชนี z: 9;
ช่องว่างภายใน: 1px;
}
li.folder {สีพื้นหลัง: #AAA;}
li.folder ul {
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 5px;
ซ้าย: 111px; / * สำหรับเบราว์เซอร์ IE * /
}
li.folder> ul {left: 140px;} / * สำหรับเบราว์เซอร์อื่น * / a {
ช่องว่างภายใน: 2px;
เส้นขอบ: 1px ทึบ #FFF;
ตกแต่งข้อความ: ไม่มี;
ความกว้าง: 100%; / * สำหรับเบราว์เซอร์ IE * /
สี: # 000;
font-weight: ตัวหนา;
}
li> a {width: auto;} / * สำหรับเบราว์เซอร์อื่น * / li a {
ความกว้าง: 140px;
แสดง: บล็อก;
} li a.submenu {
พื้นหลังสี: สีเหลือง;
} / * ลิงค์ * /
เป็น: โฮเวอร์ {
ขอบสี: สีเทา;
สีพื้นหลัง: # FF0000;
สีดำ;
}
li.folder a: โฮเวอร์ {
สีพื้นหลัง: # FF0000;
} / * โฟลเดอร์ * /
ul ul, li: เลื่อน ul ul {แสดง: none;}
li.folder: โฮเวอร์ {z-index: 10;}
li: โฮเวอร์ ul, li: โฮเวอร์ li: โฮเวอร์ ul {แสดง: บล็อก;}
- 1. หน้า
-
2. โฟลเดอร์
- 2.1 หน้า
-
2.2 โฟลเดอร์
- 2.2.1 หน้า
- 2.2.2 หน้า
- 2.2.3 หน้า
- 2.3 หน้า
-
3. โฟลเดอร์
- 3.1 หน้า
- 3.2 หน้า
- 3.3 หน้า
- 4. หน้า
ขั้นตอนที่ 3
คุณสามารถเพิ่มการรองรับเบราว์เซอร์ Internet Explorer เวอร์ชันเก่าให้กับโค้ดนี้ได้ - โค้ดนี้ใช้งานได้โดยใช้ JavaScript (โดย Peter Nederlof) คุณต้องดาวน์โหลดไฟล์ด้วยรหัสที่จำเป็นเช่นจากลิงค์นี้ - https://peterned.home.xs4all.nl/htc/csshover3.htc ต้องอยู่ในโฟลเดอร์เดียวกับหน้าหลัก และในคำอธิบายสไตล์ของหน้าหลัก ให้เพิ่มลิงก์เข้าไป - สามารถวางไว้หลังแท็กรูปแบบการเปิดได้โดยตรง: / * สำหรับเบราว์เซอร์ IE รุ่นเก่า *
เนื้อหา {พฤติกรรม: url ("csshover3.htc");}