တစ်ခုတည်းသော လျှောက်ချိနိုင်သော နောက်ဆက်တွဲလုပ်ငန်းအသင်း ဖန်တီးပုံ

CSS နှင့် JavaScript ကို အသုံးပြု၍ လျှောက်ချိနိုင်သော နောက်ဆက်တွဲလုပ်ငန်းအသင်း ဖန်တီးပါ

လျှောက်ချိနိုင်သော နောက်ဆက်တွဲလုပ်ငန်းအသင်း ဖန်တီးပါ

အသုံးပြုသူသည် ဘေ့စ်ဘက်လက်ကို လျှောက်ချိသောအခါ ပေါ်ထွက်သော နောက်ဆက်တွဲလုပ်ငန်းအသင်း

ပထမဆုံးအပိုင်း - HTML ထပ်ပေးပါ

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  

    <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  <a href="#">Link 3</a>
<a href="#">Link 3</a>

အကျိုးဆက် အရာသုံး အရာပေါ်

</div>

နောက်ဆက်တွဲ အချက်အလက် ဖွင့်လိုက်ရန် အရွယ်အစား တစ်ခု အသုံးပြုပါ၊ ဥပမာ <button> သို့မဟုတ် <a> သို့မဟုတ် <p> အရွယ်အစား。

ချွန် နှင့် <div> အရွယ်အစား တွဲဖက် ပေးရာတွင် <div> အရွယ်အစား အသုံးပြုပါ၊ နောက်ဆက်တွဲ အချက်အလက် ခုံးချိန် အတွက် CSS အသုံးပြုပါ。

ဒုတိယ အပိုင်း - စက်တင် CSS:

/* နောက်ဆက်တွဲ ချွန် */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* မီးသွား သို့မဟုတ် စိတ်ဝေးသော နောက်ဆက်တွဲ ချွန် */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* အရွယ်အစား <div> - နောက်ဆက်တွဲ အချက်အလက် ခုံးချိန် */
.dropdown {
  position: relative;
  display: inline-block;
}
/* နောက်ဆက်တွဲ အချက်အလက် ပိတ်ထား */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* နောက်ဆက်တွဲ အချက်အလက် အော်လက် */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* မတွေ့ခဲ့သော မီးသွား အရောင် ပြောင်းလဲသည် */
.dropdown-content a:hover {background-color: #ddd;}
/* ကျင်းသုံး အသွင် ကို ပြသပါ (အသုံးပြုသူ က ကျင်းသုံး နှိပ်ခဲ့ခြင်း အား နှိပ်ခဲ့ရှိသော် ကျင်းသုံး အသွင် အတွင်း ကို အသုံးပြုပါ) */
.show {display:block;}

အကျိုးဆက် အရာသုံး အရာပေါ်

ကျင်းသုံး အသွင် နှိပ်ခဲ့ခြင်း အတွက် အပြင်အဆင် ကို ကျင်းပပါ။

.dropdown အခြေအနေ ကို သုံးပါ position:relative၊ ကို ကျင်းသုံး အသွင် အတွင်း အရပ်ခတ်ခြင်း အတွက် သုံးပါ position:absolute），အရာကို လုပ်ပါ

.dropdown-content အခြေအနေ ကို လျှပ်ပေး ပါ။ လျှပ်ပေး အခြေအနေ ကို သုံးပါ။ overflow:auto ကို အသုံးပြု ပြီး နှင့် နှိပ်ခဲ့ခြင်း အတွက် အလွန် အလွန် ကြောင်း ဖြေရှင်းပါ

ဘယ်ဖက် ကို မမှုထုတ် ပြီး နှင့် ဆိုင်သော ကျင်းသုံး အသွင် ကို သုံးပါ။ box-shadow အခြေအနေ ကို ကျင်းသုံး အသွင် ကို ရောင်ချိန် တစ် ပုံ ကဲ့သို့ မြင်သည် အတွက် သုံးပါ။ ပြီးတော့ ကျင်းသုံး အသွင် ကို သုံးပါ။ z-index ကျင်းသုံး အသွင် ကို အခြား အဆက်များ အထဲ သို့ သွင်းပါ

တတိယ အစီအစဉ် - ဂျိုးစ်စ် အသုံးပြုပါ

/* အသုံးပြုသူ က နှိပ်ခဲ့သော နှိပ်ခဲ့ခြင်း အား ကျင်းသုံး အသွင် အဆိုပါ ကျင်းသုံး အသွင် အတွင်း ကို ဖုံးကွယ် သို့မဟုတ် ဖုံးကွယ်ခြင်း အခြေအနေ ပြောင်းလဲစေတယ် */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// အသုံးပြုသူ က ကျင်းသုံး အသွင် အပြင် အရပ်ခတ်ခဲ့ရှိသော် ကျင်းသုံး အသွင် အပိုက်
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

ကိုယ်ပိုင် ကြိုးစား ပါ

相关页面

教程：CSS 下拉菜单

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