ວິທີການສ້າງ: ບັນຍາບັນ "More" ຂອງບັນຍາບັນການເຊື່ອມຕໍ່

ຮຽນວິທີການສ້າງບັນຍາບັນ "More".

ສ້າງບັນຍາບັນການເຊື່ອມຕໍ່ຊົມລອດ

ບ່ອນທີ່ຜູ້ນຳໃຊ້ຈະການຄົ້ນຫາປະກອບອີເມວຂອງບັນຍາບັນການເຊື່ອມຕໍ່ ຈະສະແດງບັນຍາບັນຊົມລອດ.

ບາງບັນຍາບັນທີໜຶ່ງ - ການເພີ່ມ HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

ຄວາມຄິດທີ່ຈະຊີ້ບອກ:

ສ້າງບັນຍາບັນໃດໆເພື່ອເປີດບັນຍາບັນຊົມລອດ ເຊັ່ນ <button>、<a> ຫລື <p>.

ສ້າງບັນຍາບັນຊົມລອດທີ່ໃຊ້ປະກອບອີເມວ (ເຊັ່ນ <div>) ແລະ ສວນທີ່ຢູ່ໃນບັນຍາບັນຊົມລອດ.

ໃຊ້ປະກອບອີເມວ <div> ເພື່ອການວັງປະກອບບັນຍາບັນບາງບັນຍາບັນອື່ນໆ ເພື່ອການການປະກາດລາຍການຊົມລອດຢ່າງຖືກຕ້ອງດ້ວຍ CSS.

ບາງບັນຍາບັນທີສອງ - ການເພີ່ມ 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 ຄູ່ມືເພື່ອກວມ. ຍ້ອນວ່ານັ້ນແມ່ນປະກອບສານ <div>, ບໍ່ແມ່ນ <a>, ພວກເຮົາຕ້ອງເຮັດໃຫ້ມັນລອຍກັນເພື່ອຮັກສາວ່າມັນຈະຢູ່ທາງຂ້າງຫົວຫຼັງ.

.dropdown-content ຄູ່ມືທີ່ກວມບານຫົວຫຼັງທີ່ພິການ. ມັນຈະເປັນການປິດຕົວໂດຍມື້ນີ້, ຈະສະແດງມາເມື່ອຜູ້ນຳໃຊ້ຍ້າຍເຫຼັກມິດ (ເບິ່ງລາຍລະອຽດໃຫ້ຫຼັງ). ສະແດງ, ການກະຕຸ້ມທີ່ສຸດຈະຖືກກະຕຸ້ມໃນ 160px. ທ່ານສາມາດປ່ຽນການກະຕຸ້ມນີ້ອີກ.

ພວກເຮົາບໍ່ໃຊ້ບາບ, ແຕ່ໃຊ້ box-shadow ປະສົມປະກອບ, ບານຫົວຫຼັງຈະເບິ່ງຄືກັບບານກາງ. ພວກເຮົາຍັງໃຊ້ z-index ວາງບານຫົວຫຼັງໃສ່ຫນັງປະກອບອື່ນໆ.

:hover ຄູ່ມືເພື່ອສະແດງບານຫົວຫຼັງເມື່ອຜູ້ນຳໃຊ້ຍ້າຍເຫຼັກມິດຂອງບານຫົວຫຼັງ. :hover

ບັນດາຫົວຫຼັງທີ່ກ່ຽວຂ້ອງ

ວິຊາ:CSS 下拉菜单

ວິຊາ:ວິຊາ: ວິທີການສ້າງບານຫົວຫຼັງທີ່ສາມາດກະຕຸ້ມໄດ້

ວິຊາ:CSS 导航栏

ວິຊາ:ວິຊາ: ວິທີການສ້າງບານຫົວຫຼັງທີ່ປະຕິບັດຕາມຄວາມພິການ