လုပ်နည်း - Search/Filter Dropdown
CSS နှင့် JavaScript တို့ပါရှိသော dropdown menu တွင် အရာများရှာဖွေနည်းကို လေ့လာပါ။
Dropdown Menu ကို စစ်ထုတ်ပါ။
နှိပ်နိုင်သော Dropdown တစ်ခုကို ဖန်တီးပါ။
သုံးစွဲသူက ခလုတ်တစ်ခုကို နှိပ်လိုက်တဲ့အခါ ပေါ်လာတဲ့ dropdown menu တစ်ခုကို ဖန်တီးပါ။
အဆင့် 1) 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>
နမူနာရှင်းပြထားပါတယ်။
dropdown menu ကိုဖွင့်ရန်၊ ဥပမာ <button>၊ <a> သို့မဟုတ် <p> element ကိုဖွင့်ပါ။
dropdown menu ကိုဖန်တီးပြီး ၎င်းအတွင်းရှိ dropdown links များကိုထည့်ရန် container element ( <div> ကဲ့သို့) ကိုသုံးပါ။
dropdown menu ကို CSS ဖြင့် မှန်ကန်စွာ နေရာချရန် ခလုတ်နှင့် <div> အနီးတစ်ဝိုက်တွင် <div> ဒြပ်စင်တစ်ခုကို ခြုံပါ။
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#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;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
နမူနာရှင်းပြထားပါတယ်။
ကျွန်ုပ်တို့သည် နောက်ခံအရောင်၊ အကွက်၊ ရွှေ့သည့်အကျိုးသက်ရောက်မှုစသည်ဖြင့် dropdown ခလုတ်ကို ပုံစံချထားပါသည်။
dropdown အကြောင်းအရာကို dropdown ခလုတ်အောက်တွင် ထားရှိစေလိုသောအခါတွင် လိုအပ်သော class .dropdownသည် အသုံးပြုသည် ။position:relativeposition:absolute
.dropdown-contentအတန်းသည် အမှန်တကယ် dropdown menu ကို ကိုင်ဆောင်ထားသည် ။ ၎င်းကို ပုံသေအားဖြင့် ဝှက်ထားပြီး၊ ပျစ်ပေါ်တွင် ပေါ်နေမည် (အောက်တွင် ကြည့်ပါ)။ min-width230px သတ်မှတ်ထားသည်ကို သတိပြုပါ ။ ဒါကို ပြောင်းလဲဖို့ အားမနာပါနဲ့။ အကြံပြုချက်- dropdown content ၏ အကျယ်ကို dropdown button ကဲ့သို့ ကျယ်လိုပါက၊ width100% (နှင့် overflow:autoသေးငယ်သော ဖန်သားပြင်များပေါ်တွင် scroll လုပ်ရန်) ကို သတ်မှတ်ပါ။
ရှာဖွေမှုအကွက် (#myInput) ကို dropdown menu တွင် အံဝင်ခွင်ကျဖြစ်အောင် ပုံစံချထားသည်။ ရှာဖွေမှုအကွက်အတွင်း ၎င်းသည် အမှန်တကယ် ရှာဖွေမှုအကွက်ဖြစ်ကြောင်း ညွှန်ပြရန်အတွက် ရှာဖွေမှုအကွက်အတွင်း ဘယ်ဘက်တွင် ထားရှိမည့် ရှာဖွေအိုင်ကွန်တစ်ခုကို ကျွန်ုပ်တို့ ထည့်သွင်းထားသည်။
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
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";
}
}
}
အကြံပြုချက်- dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Dropdowns Tutorial သို့ သွားပါ ။
အကြံပြုချက်- အလျားလိုက်လုပ်နိုင်သော dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ Hoverable Dropdowns သို့ သွားပါ ။