จะเป็นแบบดูดลง: แบบดูดลง

เรียนรู้ว่าจะเป็นแบบดูดลงด้วย CSS

แบบดูดลง

แบบดูดลงเป็นแบบที่สามารถเปิด/ปิดได้ ซึ่งอนุญาตให้ผู้ใช้เลือกค่าจากรายการที่กำหนดขึ้นมา:

ลิงก์ 1 ลิงก์ 2 ลิงก์ 3

ลองทดลองด้วยตัวเอง

สร้างแบบดูดลงที่สามารถหลุดลงได้

สร้างแบบดูดลง ซึ่งจะแสดงรายการเมื่อผู้ใช้เคลื่อนเมาเหนือตัวเรื่อง.

ขั้นที่ 1 - เพิ่ม HTML：

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-content">
    <a href="#">ลิงก์ 1</a>
    <a href="#">ลิงก์ 2</a>
    <a href="#">ลิงก์ 3</a>
  </div>
</div>

ตัวอย่างที่ชี้แจง

สามารถใช้สิ่งเรียกเรื่องใดก็ได้เพื่อเปิดแบบดูดลง ตัวอย่างเช่น <button>、<a> หรือ <p> สิ่งเรียกเรื่อง.

ใช้สิ่งเรียกเรื่องตัวแทน (เช่น <div>) เพื่อสร้างแบบดูดลงตรงข้าม และเพิ่มลิงก์ดูดลง.

ใช้สิ่งเรียกเรื่อง <div> มาล้อมปุ่มและ <div> ซึ่งใช้เพื่อที่จะใช้ CSS ในการจัดตำแหน่งแบบดูดลงตรงข้าม.

ขั้นที่ 2 - เพิ่ม CSS：

/* ปุ่มดูดลง */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* องค์ประกอบ <div> - ใช้ในการจัดตัวองค์ประกอบที่จำเป็นสำหรับโมดูลที่ลากดาวน์ */
.dropup {
  position: relative;
  display: inline-block;
}
/* ของโมดูลที่ลากดาวน์ (ซ่อนไว้โดยค่าเริ่มต้น) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ลิงก์ที่ลากดาวน์ในโมดูล */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* แก้ไขสีของลิงก์ที่ลากดาวน์เมื่อมีการเคลื่อนที่เมาส์เหนือ */
.dropup-content a:hover {background-color: #ddd}
/* แสดงโมดูลที่ลากดาวน์เมื่อมีการเคลื่อนที่เมาส์เหนือ */
.dropup:hover .dropup-content {
  display: block;
}
/* แก้ไขสีพื้นหลังปุ่มที่ลากดาวน์เมื่อโมดูลที่ลากดาวน์แสดงขึ้น */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

ลองทดลองด้วยตัวเอง

ตัวอย่างที่ชี้แจง

เราได้ตั้งค่าสีพื้นหลัง หน้าต่างด้านใน และรูปแบบอื่นๆ สำหรับปุ่มที่ลากดาวน์

.dropup รายการคุณสมบัติ position:relativeเมื่อเราต้องการที่จะจัดเก็บเนื้อหาของโมดูลที่ลากดาวน์ขึ้นด้านบนของปุ่มที่ลากดาวน์ (ใช้ position:absoluteคือสิ่งที่จำเป็น

.dropup-content รายการคุณสมบัติที่มีโมดูลที่ลากดาวน์ที่แท้จริง มันที่ด้วยค่าเริ่มต้นคือซ่อนไว้ และจะแสดงขึ้นเมื่อมีการเคลื่อนที่เมาส์เหนือ (ดูลงไปใต้นี้) โปรดระวังว่าความกว้างเท่าน้อย 160px คุณสามารถเปลี่ยนค่านี้ตามความต้องการของคุณ คำเตือน: หากคุณต้องการให้ความกว้างของเนื้อหาของโมดูลที่ลากดาวน์เหมือนปุ่มที่ลากดาวน์ คุณสามารถตั้งค่าความกว้างเป็น 100% (และใช้เมื่อมีหน้าจอเล็ก) overflow:auto เพื่อให้เปิดโซ่งยาวตลอด (overflow) โดยอัตโนมัติ

เราไม่ได้ใช้เส้นขอบ แต่ใช้ box-shadow รายการคุณสมบัติที่ทำให้โมดูลที่ลากดาวน์ดูเหมือนใบ 'แครด' ที่เรายังใช้ z-index จัดเก็บโมดูลที่ลากดาวน์ไปข้างหน้าองค์ประกอบอื่น

:hover 选择器用于在用户将鼠标悬停在上拉按钮上时显示上拉菜单。