ບົດການຄົ້ນຫາ/ກວດສອບລະບຸບພາບລົງຕິດຕາມ.

ບົດການສຶກສາການນຳໃຊ້ CSS ແລະ JavaScript ເພື່ອຄົ້ນຫາລະບຸບພາບລົງຕິດຕາມ.

ສ້າງລະບຸບພາບລົງຕິດຕາມທີ່ສາມາດກົດລະບຽບໄດ້.

ສ້າງລະບຸບພາບລົງຕິດຕາມທີ່ຈະປະກົດມາເມື່ອຜູ້ນຳໃຊ້ຊົງປະຕູ.

ການທີ 1 - ສະແດງ HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="ຄົ້ນຫາ.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">ກ່ຽວກັບ</a>
    <a href="#base">ພື້ນຖານ</a>
    <a href="#blog">ບຣ໊ອກ</a>
    <a href="#contact">ການຕິດຕາມ</a>
    <a href="#custom">ຄວາມອຸດົມສະພາບ</a>
    <a href="#support">ການສະໜັບສະໜູນ</a>
    <a href="#tools">ອຸປະກອນ</a>
  </div>
</div>

ບາງການທີ່ຈະຖືກປ່ຽນແປງ:

ສາມາດໃຊ້ປະກອບສະຖານນະຂະພາບໃດໆທີ່ຕ້ອງການເປີດລະບຸບພາບລົງຕິດຕາມ ເຊັ່ນ <button>،<a> ຫຼື <p>.

ໃຊ້ປະກອບສະຖານນະຂະພາບເພື່ອສ້າງລະບຸບພາບລົງຕິດຕາມ ແລະ ສະແດງການເຊື່ອມຕໍ່ລະບຸບພາບລົງຕິດຕາມ.

ໃຊ້ <div> ອກລວມກັບປະຕູແລະ <div> ອື່ນໆ ເພື່ອສະແດງລະບຸບພາບລະບາຍລົງຕິດຕາມ CSS.

ການທີ 2 - ສະແດງ CSS:

/* ລະບຸບປະຕູບລະບາຍ */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* ລະບົບຫົວໜ້າລະບາຍເມື່ອມູນນິທິຂັດຄືນ ແລະ ຖືກກໍ່ການຄົ້ນຫາ */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* ບັນຊີຄົ້ນຫາ */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* ເມື່ອບັນຊີຄົ້ນຫາມີຄວາມສົນໃຈ / ຖືກກໍ່ການຄົ້ນຫາ */
#myInput:focus {outline: 3px solid #ddd;}
/* ບັນຊີ <div> - ສຳລັບການຕິດຕັ້ງລະບົບຫົວໜ້າລະບາຍ */
.dropdown {
  position: relative;
  display: inline-block;
}
/* ສິ່ງຂອງລະບົບຫົວໜ້າລະບາຍ (ຄືນແບບປິດ) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* ລະບົບຫົວໜ້າລະບາຍໃນລະບົບຫົວໜ້າລະບາຍ */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* ປ່ຽນສະຫລັບສີຂອງລະບົບຫົວໜ້າລະບາຍເມື່ອມູນນິທິຂອງມູນນິທິຂັດຄືນ */
.dropdown-content a:hover {background-color: #f1f1f1}
/* ໄດ້ສະແດງລະບົບຫົວໜ້າລະບາຍ (ເມື່ອຜູ້ນຳໃຊ້ຄົ້ນຫາລະບົບຫົວໜ້າລະບາຍລາວກໍ່ການເພີ່ມປະເພດນີ້ໃຫ້ .dropdown-content ຄອນເກຣີ່ງ) */
.show {display:block;}

ບາງການທີ່ຈະຖືກປ່ຽນແປງ:

ພວກເຮົາໄດ້ອອກແບບກົບກະຕຸບການດືກດູດ, ລວມທັງສີບີນວັດ, ປະກອບພິມ, ການສະແດງການສະເພາະຫາກມີການຫາຫາກົດການ.

.dropdown ພາສາທີ່ມີການກວມຢູ່ໃນລະບົບການດືກດູດ. position:relativeເພື່ອພະຍາຍາມໃຫ້ການດືກດູດຢູ່ທາງກາງຂອງລະບົບການດືກດູດ. ຖ້າທ່ານໃຊ້ position:absolute ພາສາທີ່ມີການກວມຢູ່ໃນພະຍານາບານ.

.dropdown-content ພາສາທີ່ມີການກວມຢູ່ໃນພະຍານາບານການດືກດູດ. ພາສາທີ່ເປັນການກຳລັງບໍ່ທຳມະດາ, ມັນຈະສະແດງຂຶ້ນໃນລະຫວ່າງການສະເພາະຫາກມີການຫາຫາກົດການ. ເຫັນຫາວ່າ:min-width ຖືກຕັດສິນໃຫ້ 230px. ທ່ານສາມາດດັດແປງຕາມຄວາມຕ້ອງການ. ຄຳແນະນຳ: ຖ້າທ່ານຕ້ອງທີ່ການດືກດູດຂອງການດືກດູດລະບົບການດືກດູດຂອງລະບົບການດືກດູດຢູ່ທາງທີ່ບາງຂອງລະບົບການດືກດູດ, ທ່ານສາມາດ width ຕັດສິນ 100%（ແລະ overflow ຕັດສິນສະຖານີ auto, ເພື່ອເປີດການຄົບຄອງໃນສະໜາມກາງສະໜາມກິດຈະວັດ.

ກົບກະຕຸບການຄົ້ນຫາ (#myInput) ໄດ້ຖືກອອກແບບສະນັກວິດີໂອເພື່ອການຕິດຕາມພາບຂອງພະຍານາບານ. ພວກເຮົາໄດ້ເພີ່ມສີນັກວິດີໂອຄົ້ນຫາທີ່ຢູ່ທາງຊ້າຍຂອງກົບກະຕຸບການຄົ້ນຫາ, ເພື່ອຊີ້ແຈງວ່ານັ້ນເປັນກົບກະຕຸບການຄົ້ນຫາ.

ບາງການທີ3 - ສະເໜີ JavaScript:

/* ບໍ່ມີຂໍ້ຄວາມທີ່ຈະຖືກປ່ຽນແປງ */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

ທ່ານຕ້ອງພະຍາຍາມຕິດຕາມ

相关页面

教程：CSS 下拉菜单

教程：如何创建可悬停的下拉菜单