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

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

منوی فروپاشی قابل کلیک ایجاد کنید

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

قدم اول - HTML اضافه کنید:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">فروپاشی</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> را به دور از باتن و یک <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 اتنا کریں تاکہ کچھ چھوٹی اسکرین پر اس کا رول آؤٹ کریگا (رول آؤٹ کو فروغ دیں))

سورچ کھانچا (#myInput) دسائی کار کردی گئی ہے، تاکہ وہ فائلٹرنگ منو کے اندر کار کریگا۔ ہم نے ایک سورچ ایکونم اضافہ کیا ہے، جو سورچ کھانچا کے اندر چپ سمت میں واقع ہے، تاکہ اس کو کیا کہ اس کا مطلب ایک سورچ کھانچا ہے، کا نشان دہ کریگا。

تیسری قدم - جاوا اسکریپٹ اضافہ کریں:

/* جب استعمال کنندہ کلک دا دبانا کریگا، فائلٹرنگ کے مطلب کا خفیہ اور نمودار کاری کے درمیان تبدیل ہوگا */
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 = "";
    }
      a[i].style.display = "none";
    }
  }
}

کامائیں امتحان کریں

صفحات مرتبط

آموزش‌ها:منو فروپين

آموزش‌ها:کيف انجام مى‌شود: منو فروپين قابل تکان دادن