แบบที่จะสร้าง: ปุ่ม "More" ในแถวนำ

เรียนรู้ว่าจะสร้างปุ่ม "More"

สร้างแถวนำเมนูดอปดาว

เมื่อผู้ใช้เคลื่อนลูกเมาส์ไปยังองค์ประกอบด้านในแถวนำ จะปรากฏเมนูดอปดาวขึ้นมา。

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

<div class="navbar">
  <a href="#home">หน้าหลัก</a>
  <a href="#news">ข่าว</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">ลิงก์ 1</a>
      <a href="#">ลิงก์ 2</a>
      <a href="#">ลิงก์ 3</a>
    </div>
  </div>
</div>

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

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

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

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

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

/* ตัวแทนแถวนำ */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* ลิงก์ด้านในแถวนำ */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ตัวแทนเมนูดอปดาว */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ปุ่มเมนูดропดาว */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* สำหรับการจัดลำดับตรงของโทรศัพท์มือถือมีความสำคัญมาก */
  margin: 0; /* สำหรับการซับซ้อนต่อการเทียบแนวตรงของมือถือ */
}
/* เพิ่มสีพื้นหลังสีแดงในลิงก์แนวนำหัวเวลาเมื่อมีการหยุดเมาส์ */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* หลักข้อมูลเมนูดดดาว (ซ่อนโดยความเป็นปกติ) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ลิงก์ภายในเมนูดดดาว */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* เพิ่มสีพื้นหลังเส้นทางเมื่อมีการหยุดเมาส์ในเมนูดดดาว */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* แสดงเมนูดดดาวเมื่อมีการหยุดเมาส์ */
.dropdown:hover .dropdown-content {
  display: block;
}

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

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

เราได้ตั้งค่าสไตล์สำหรับแนวนำหัวเวลา และลิงก์นำทาง เช่น สีพื้นหลัง จุดชำระขอบเขต

เราได้ตั้งค่าสไตล์สำหรับปุ่มเมนูดดดาว เช่น สีพื้นหลัง จุดชำระขอบเขต

.dropdown รูปแบบ .dropdown-content ของตัวแทน

.dropdown-content รูปแบบที่มีเมนูดดดาวที่แท้จริง มันซึ่งด้วยความเป็นปกติจะซ่อนไว้ และจะแสดงขึ้นเมื่อมีการหยุดเมาส์ (ดูข้างล่าง) ตั้งแต่นี้ โปรดแก้ไขการตั้งค่านี้เอง

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

:hover เลือกเซลเล็กเตอร์เพื่อแสดงเมนูดดดาวเมื่อผู้ใช้เคลื่อนเมาส์ไปยังปุ่มเมนูดดดาว

หน้าที่เกี่ยวข้อง

คำสั่งศึกษา:CSS 下拉菜单

คำสั่งศึกษา:แบบทดลอง: การสร้างเมนูดดดาวที่สามารถคลิก

คำสั่งศึกษา:CSS 导航栏

คำสั่งศึกษา:แบบทดลอง: การสร้างแนวนำหัวเวลาที่ตอบสนองต่อการเคลื่อนไหว