ဆိုင်းပန်းလုံးကို ရှာဖွေ/စစ်ဆေးရန်

ဆိုင်းပန်းလုံးတွင် ကိုယ်ပိုင် 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>

အကြောင်းအရာ

ဆိုင်းပန်းလုံးကို ဖွင့်ရန် အချက်အလက်တစ်ခုကို အကောင့်ခံကြရ နည်းပါးဆိုက်နှင့် နှုတ်ပေါင်းအချက်အလက်တစ်ခုကို အကောင့်ခံကြရ

အဆိုပါ ဆိုင်းပန်းလုံးကို အချက်အလက်တစ်ခုဖြင့် တည်ထောင်ပြီး ဆိုင်းပန်းလုံး၏ လဲလဲသင်းကို ထိန်းချုပ်ခြင်းကို ထပ်ပေးခြင်း

အချက်အလက်တစ်ခုဖြင့် နှုတ်ပေါင်းအချက်အလက်တစ်ခုကို ကိုယ်ဝင်ပေးပြီး အဆိုပါ ဆိုင်းပန်းလုံးကို ကိုယ်ဝင်တည်ထောင်ခြင်းကို အကောင့်ခံကြရ သို့မဟုတ် ဆိုင်းပန်းလုံးကို တည်ထောင်ရန် အကောင့်ခံကြရ

ဒုတိယပုဒ် - အစီအစဉ် 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;
}
/* နောက်ပြန်ပေးအရွက် အသုံးပြ�သူ မှတ်ချက်မှာ နောက်ပြန်ပေးအသုံးပြုသူ အခုခံအရွက် အသွင်အပြင် အမည်တူ #f1f1f1 အသွင်အပြင် ဖြင့် ပြောင်းလဲသည် */
.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 下拉菜单

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