کیسے ڈراپ دمنو منو میں تلاش/فیلٹر کریں

سی ایس ایس اور جاوا سکریپٹ کا استعمال کریں تاکہ ڈراپ دمنو منو میں آئٹمز تلاش کئے جاسکیں

کسی بھی بٹن کا استعمال کریں تاکہ ڈراپ دمنو منو کا استعمال کیا جاسکے

ایک ڈراپ دمنو منو بنائیں جو کہ وقت سے آپ کا اشارہ کریں اور بٹن پر کلک کیا جائے گا。

پہلی قدم - ایچ تی ایم اضافہ کریں:

<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">ابو</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> عناصر میں پیچھے بند کریں، تاکہ سی ایس ایس کے ذریعے ڈراپ دمنو منو کو صحیح طریقے سے لوٹایا جاسکے。

دوسری قدم - سی ایس ایس اضافہ کریں:

/* ڈراپ دمنو بٹن */
.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) ਦਾ ਸਟਾਈਲ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਕਿ ਝਿੱਲ੍ਹੇ ਦੀ ਅੰਦਰੂਨੀ ਸ਼ੈਲੀ ਨੂੰ ਪੂਰਾ ਕੀਤਾ ਜਾ ਸਕੇ। ਅਸੀਂ ਇੱਕ ਸਰਚ ਆਇਕਾਨ ਜੋੜਿਆ ਹੈ, ਜੋ ਸਰਚ ਬਕਸਾ ਦੇ ਅੰਦਰ ਦੱਖਣੀ ਪਾਸੇ ਹੈ, ਤਾਕਿ ਇਹ ਇੱਕ ਸਰਚ ਬਕਸਾ ਹੈ ਇਸ ਦਾ ਸੰਕੇਤ ਦੇਵੇ।

ਤੀਜਾ ਪਗਲਾ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

/* ਜਦੋਂ ਉਪਭੋਗਤਾ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਝਿੱਲ੍ਹੇ ਦੇ ਪਿੱਛੇ ਦਿਖਾਉਣ ਅਤੇ ਛੁਪਾਉਣ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰੋ */
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 下拉菜单

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