ড্রপডাউন মেনুতে সার্চ/ফিল্টারিং কিভাবে করা যায়

সিএসএস এবং জেএসএম ব্যবহার করে ড্রপডাউন মেনুতে আইটেম সার্চ করার জন্য শিখুন

ক্লিকযোগ্য ড্রপডাউন মেনু তৈরি করুন

একটি ড্রপডাউন মেনু তৈরি করে, যা ব্যবহারকারী বাটন ক্লিক করলে দেখা যাবে。

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<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}
/* ডাউনড্রপ মেনু দেখান (যখন ব্যবহারকারী ডাউনড্রপ মেনু বাটন ক্লিক করে, JS এই শ্রেণীটি .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";
    }
  }
}

স্বয়ং পরীক্ষা করুন

相关页面

教程：সিএসএস ড্রপডাউন মেনু

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