CSS เมนูแบบเลื่อนลง
ใช้ CSS เพื่อสร้างการแสดงหลังจากย้ายเมาส์ผลเมนูแบบเลื่อนลง
ตัวอย่างของเมนูแบบเลื่อนลง
ตัวอย่างสาธิต 1
กวดวิชานี้
www.w3big.com
ตัวอย่างสาธิต 2
ตัวอย่างสาธิต 3
เมนูแบบเลื่อนลงพื้นฐาน
เมื่อเมาส์ถูกย้ายไปยังองค์ประกอบที่ระบุจะเลื่อนลงมาปรากฏเมนู
ตัวอย่าง
.dropdown {
ตำแหน่ง: ญาติ;
จอแสดงผล: อินไลน์บล็อก
}
.dropdown เนื้อหา {
display: none;
position: absolute;
สีพื้นหลัง: # f9f9f9;
นาทีความกว้าง: 160px;
กล่องเงา: 0px 8px 16px 0px RGBA (0,0,0,0.2);
padding: 12px 16px;
ดัชนี z: 1;
}
.dropdown: โฉบ .dropdown เนื้อหา {
จอแสดงผล: บล็อก
}
</ style>
<ระดับ Div = "เลื่อนลง">
<span> เมาส์มากกว่าฉัน </ span>
<ระดับ Div = "แบบเลื่อนลงเนื้อหา ">
<p> Hello World! </ P>
</ div>
</ div>
ลอง»
ตัวอย่างของการวิเคราะห์
HTML ส่วนหนึ่ง:
เราสามารถใช้ใด ๆ ของ HTM องค์ประกอบเพื่อเปิดเมนูแบบเลื่อนลงเช่น: <span> หรือ <ปุ่ม> องค์ประกอบ
ใช้องค์ประกอบคอนเทนเนอร์ (เช่น: <div>) เพื่อสร้างเมนูแบบเลื่อนลงและอยู่ที่ใดก็ได้ที่คุณต้องการที่จะวางบน
ใช้ <div> ห่อองค์ประกอบเหล่านี้และใช้ CSS เพื่อกำหนดเนื้อหาของสไตล์แบบเลื่อนลง
ส่วน CSS:
.dropdown ระดับใช้ position:relative ซึ่งจะกำหนดเนื้อหาเมนูแบบเลื่อนลงจะอยู่ในปุ่มแบบเลื่อนลง (โดยใช้ position:absolute ) ในตำแหน่งที่มุมขวาล่าง
.dropdown-content ระดับเป็นเมนูแบบเลื่อนลงที่เกิดขึ้นจริง ถูกซ่อนไว้โดยค่าเริ่มต้นจะปรากฏในเมาส์จะถูกย้ายไปยังองค์ประกอบที่ระบุหลัง โปรดทราบว่า min-width ถูกตั้งค่าเพื่อ 160px คุณได้อย่างอิสระสามารถแก้ไขได้ หมายเหตุ: หากคุณต้องการตั้งค่าแบบเลื่อนลงและปุ่มเนื้อหาบรอดแบนด์แบบเลื่อนลงสอดคล้องตั้งค่า width ไปยัง% 100 ( overflow:auto การตั้งค่าสามารถเลื่อนขนาดที่เล็กของหน้าจอ)
เราใช้ box-shadow ที่พักอนุญาตให้เมนูแบบเลื่อนลงที่ดูเหมือนว่า "บัตร."
:hover เลือกสำหรับผู้ใช้: เมนูแบบเลื่อนลงจะปรากฏขึ้นเมื่อเมาส์ถูกย้ายไปยังปุ่มเลื่อนลง
เมนูแบบเลื่อนลง
สร้างเมนูแบบเลื่อนลงและช่วยให้ผู้ใช้สามารถเลือกรายการในรายการนี้:
ตัวอย่างที่กล่าวมาข้างต้นกรณีที่คล้ายกันเมื่อเราเพิ่มการเชื่อมโยงในรายการแบบหล่นลงและการตั้งค่ารูปแบบ:
ตัวอย่าง
/ * รูปแบบปุ่มแบบเลื่อนลง * /
.dropbtn {
สีพื้นหลัง: # 4CAF50;
สี: สีขาว;
padding: 16px;
font-size: 16px;
ชายแดน: none;
เคอร์เซอร์: ตัวชี้;
}
/ * คอนเทนเนอร์ <div> - คุณจำเป็นต้องค้นหาเนื้อหาแบบเลื่อนลง * /
.dropdown {
ตำแหน่ง: ญาติ;
จอแสดงผล: อินไลน์บล็อก
}
/ * เนื้อหา Pulldown (ซ่อนไว้โดยค่าเริ่มต้น) * /
.dropdown เนื้อหา {
display: none;
position: absolute;
สีพื้นหลัง: # f9f9f9;
นาทีความกว้าง: 160px;
กล่องเงา: 0px 8px 16px 0px RGBA (0,0,0,0.2);
}
/ * เมนูลิงค์เลื่อนลง * /
.dropdown-เนื้อหา {
สี: สีดำ;
padding: 12px 16px;
ตกแต่งข้อความ: none;
จอแสดงผล: บล็อก
}
/ * ต่อไปนี้การแก้ไขเมนูสีลิงค์โฉบหล่นลง * /
.dropdown เนื้อหา A: โฉบ {พื้นหลัง -color: # f1f1f1}
/ * หลังจากที่การแสดงเมนูแบบเลื่อนลงโฉบ * /
.dropdown: โฉบ .dropdown เนื้อหา {
จอแสดงผล: บล็อก
}
/ * เมื่อเนื้อหาของหล่นลงหลังจากกดปุ่มเลื่อนลงจะแสดงสีพื้นหลังการแก้ไข * /
.dropdown: โฉบ .dropbtn {
สีพื้นหลัง: # 3e8e41;
}
</ style>
<ระดับ Div = "เลื่อนลง">
<ปุ่ม class = "dropbtn"> เมนูแบบเลื่อนลง </ ปุ่ม>
<ระดับ Div = "แบบเลื่อนลงเนื้อหา ">
<A href = "#"> กวดวิชานี้ 1 </ a>
<A href = "#"> กวดวิชานี้ 2 </ a>
<A href = "#"> กวดวิชานี้ 3 </ a>
</ div>
</ div>
ลอง»
เนื้อหาการจัดข้อความแบบเลื่อนลง
ลอย: ด้านซ้าย;
ลอย: ขวา;
หากคุณต้องการตั้งค่าเมนูแบบเลื่อนลงลอยเนื้อหาขวาจากขวาไปซ้ายแทนจากซ้ายไปขวาคุณสามารถเพิ่มรหัสต่อไป right: 0;
ตัวอย่างเพิ่มเติม
รูปแบบเลื่อนลง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มภาพของวิธีการที่เมนูแบบเลื่อนลง
หล่นลงนำทาง
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มเมนูแบบเลื่อนลงบนแถบนำทาง