چگونه منوی فهرست پایین را جستجو/فیلتر کنم

آموزش نحوه استفاده از CSS و JavaScript برای جستجوی پروژه‌ها در منوی فهرست پایین.

منوی فهرست پایین قابل کلیک ایجاد کنید

یک منوی فهرست پایین ایجاد کنید که هنگام کلیک کاربر ظاهر شود.

مرحله اول - اضافه کردن HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

توضیح مثال:

می‌توان از هر عنصری برای باز کردن منوی فهرست پایین استفاده کرد، مانند یک دکمه <button>، عنصر <a> یا <p>.

با استفاده از یک عنصر حاوی (مثلاً <div>) برای ایجاد منوی فهرست پایین و اضافه کردن لینک‌های منوی فهرست پایین.

با استفاده از یک عنصر <div>، دکمه و یک <div> دیگر را بپوشانید تا منوی فهرست پایین به درستی با استفاده از CSS قرار داده شود.

مرحله دوم - اضافه کردن 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) طراحی شده است تا با فهرست فروپاشی سازگار باشد. ما یک آیکون جستجو اضافه کرده‌ایم که در سمت چپ حسابگر جستجو قرار دارد، که نشان می‌دهد این یک حسابگر جستجو است.

مرحله سوم - اضافه کردن 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");
  برای (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    اگر txtValue.toUpperCase().indexOf(filter) > -1 {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

آزمایش کنید

صفحات مرتبط

آموزش‌ها:منوهای فله‌ای CSS

آموزش‌ها:چگونه ایجاد کنیم: منوی فله‌ای قابل قرارگیری روی ماوس