ဘယ်လို

အိမ်လုပ်နည်း

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု Topnav အိုင်ကွန်များဖြင့် Navbar ရှာရန် မီနူး Search Bar ပုံသေဘေးဘား စာမျက်နှာလမ်းညွှန် တုံ့ပြန်မှုဘေးထွက်ဘား မျက်နှာပြင်အပြည့် လမ်းညွှန်ချက် ကင်းဗတ် မီနူး Sidenav ခလုတ်များကို နှိပ်ပါ။ အိုင်ကွန်များပါသော ဘေးဘား အလျားလိုက် Scroll Menu ဒေါင်လိုက် မီနူး အောက်ခြေလမ်းညွှန် တုံ့ပြန်မှုအောက်ခြေရေကြောင်း Bottom Border Nav Links ညာဘက်ညှိထားသော မီနူးလင့်ခ်များ ဗဟိုပြုမီနူးလင့်ခ် တူညီသော အနံ မီနူးလင့်ခ်များ ပုံသေမီနူး Scroll တွင် Slide Down Bar Scroll တွင် Navbar ကိုဝှက်ထားပါ။ Scroll တွင် Navbar ကို လျှော့ပါ။ Sticky Navbar ပုံပေါ်ရှိ Navbar Dropdowns များကို ရွှေ့ပါ။ Dropdowns ကိုနှိပ်ပါ။ Cascading Dropdown Topnav တွင် dropdown Sidenav တွင် dropdown Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu မိုဘိုင်းမီနူး Curtain Menu ပြိုကျနေသော ဘေးဘား ပြိုကျနေသော ဘေးဘောင် Pagination Breadcrumbs ခလုတ်အုပ်စု ဒေါင်လိုက်ခလုတ်အုပ်စု Sticky Social Bar ဆေးပြားညွှန်း တုံ့ပြန်မှုဆိုင်ရာ ခေါင်းစီး

ပုံများ

ဆလိုက်ရှိုး ဆလိုက်ရှိုးပြခန်း Modal ပုံများ မီးပုံး Responsive Image Grid ရုပ်ပုံဂရစ် တဘ်ပြခန်း ပုံထပ်ဆင့်မှိန် ပုံထပ်ဆင့်ဆလိုက် ပုံကို ထပ်ဆင့်ချဲ့ပါ။ ပုံထပ်ဆင့်ခေါင်းစဉ် ပုံထပ်ဆင့်သင်္ကေတ ရုပ်ပုံအကျိုးသက်ရောက်မှုများ အဖြူအမည်းပုံ ရုပ်ပုံစာသား ရုပ်ပုံစာသား ပိတ်ဆို့ခြင်းများ ဖောက်ထွင်းမြင်ရသော ရုပ်ပုံစာသား စာမျက်နှာအပြည့်ပုံ ပုံပေါ်ဖောင် သူရဲကောင်းပုံရိပ် မှုန်ဝါးသော နောက်ခံပုံ Scroll တွင် Bg ကိုပြောင်းပါ။ ဘေးချင်းကပ်ပုံများ လုံးဝန်းသောပုံများ ကိုယ်ပွားပုံများ တုံ့ပြန်မှုပုံရိပ်များ စင်တာပုံများ ပုံသေးများ နယ်နိမိတ်ပုံ အသင်းနှင့်တွေ့ဆုံပါ။ ကပ်နေသောပုံ ပုံတစ်ပုံကိုလှန်ပါ။ ပုံတစ်ခုလှုပ်ပါ။ အစုစုပြခန်း အစုစုကို စီစစ်ခြင်း။ ရုပ်ပုံချဲ့ခြင်း။ ပုံရိပ်ချဲ့ဖန်ခွက် ပုံနှိုင်းယှဉ်ဆလိုက်ဒါ Favicon

ခလုတ်များ

သတိပေးခလုတ်များ ကောက်ကြောင်းခလုတ်များ ခလုတ်များ ခွဲပါ။ ကာတွန်းခလုတ်များ ခလုတ်များ နွမ်းလာသည်။ ပုံပေါ်ခလုတ် ဆိုရှယ်မီဒီယာခလုတ်များ Read More လျှော့ဖတ်ပါ။ ခလုတ်များဖွင့်ခြင်း။ ဒေါင်းလုဒ်ခလုတ်များ ဆေးလုံးခလုတ်များ အကြောင်းကြားချက်ခလုတ် Icon ခလုတ်များ Next/prev ခလုတ်များ Nav တွင် နောက်ထပ်ခလုတ် ခလုတ်များပိတ်ခြင်း။ စာသားခလုတ်များ အဝိုင်းခလုတ်များ အပေါ်ဆုံးခလုတ်ကို ရွှေ့ပါ။

ပုံစံများ

Login Form စာရင်းသွင်းပုံစံ ငွေထုတ်ပုံစံ ဆက်သွယ်ရန်ပုံစံ လူမှုရေးဝင်ရောက်မှုပုံစံ ဖောင်စာရင်းသွင်းပါ။ အိုင်ကွန်များဖြင့် ဖောင်ပုံစံ သတင်းလွှာ စုဖွဲ့ထားသောပုံစံ တုံ့ပြန်မှုပုံစံ ပေါ့ပ်အပ်ဖောင် Inline ပုံစံ ထည့်သွင်းမှုအကွက်ကို ရှင်းလင်းပါ။ နံပါတ်မြှားများကို ဝှက်ပါ။ စာသားကို ကလစ်ဘုတ်သို့ ကူးယူပါ။ သက်ဝင်လှုပ်ရှားရှာဖွေမှု ရှာဖွေရန်ခလုတ် မျက်နှာပြင်အပြည့် ရှာဖွေမှု Navbar တွင် ထည့်သွင်းသည့်အကွက် Navbar တွင် Login Form စိတ်ကြိုက်စစ်ဆေးပုံး/ရေဒီယို စိတ်ကြိုက်ရွေးချယ်ပါ။ ပြောင်းရန် Checkbox ကိုစစ်ဆေးပါ။ Caps Lock ကို ထောက်လှမ်းပါ။ Enter တွင် Trigger ခလုတ် စကားဝှက်အတည်ပြုခြင်း။ စကားဝှက် မြင်နိုင်မှုကို ပြောင်းပါ။ အဆင့်များစွာပုံစံ အလိုအလျောက်ဖြည့်ပါ။ အလိုအလျောက်ဖြည့်စွက်ခြင်းကို ပိတ်ပါ။ စာလုံးပေါင်းစစ်ဆေးခြင်းကို ပိတ်ပါ။ ဖိုင်တင်ခြင်းခလုတ် ဗလာထည့်သွင်းမှု အတည်ပြုခြင်း။

စစ်ထုတ်မှုများ

စာရင်းစစ် Filter ဇယား ဒြပ်စင်များကို စစ်ထုတ်ပါ။ Filter Dropdown စာရင်းခွဲပါ။ စာလုံးပေါင်းဇယား

စားပွဲများ

မြင်းကျားအစင်း စားပွဲ စင်တာဇယားများ ဇယားကွက် အကျယ် ဘေးချင်းကပ် ဇယားများ တုံ့ပြန်မှုဇယားများ နှိုင်းယှဉ်ဇယား

နောက်ထပ်

မျက်နှာပြင်အပြည့် ဗီဒီယို ပုံစံသေတ္တာများ Modal ကိုဖျက်ပါ။ အချိန်ဇယား Scroll Indicator တိုးတက်မှုဘားများ ကျွမ်းကျင်မှုဘား Range Sliders ကိရိယာအကြံပြုချက်များ မျက်နှာပြင် အစိတ်အပိုင်းကို ဖိထားပါ။ ပေါ့ပ်အပ်များ အထူးပင် ပြက္ခဒိန် HTML ပါဝင်သည်။ လုပ်ရန်စာရင်း လက်ဆွဲများ ကြယ်အဆင့်သတ်မှတ်ချက် အသုံးပြုသူ အဆင့်သတ်မှတ်ချက် ထပ်ဆင့်အကျိုးသက်ရောက်မှု ချစ်ပ်ပြားများ ဆက်သွယ်ပါ။ ကတ်များ ခေါက်ကတ် ပရိုဖိုင်ကတ် ထုတ်ကုန်ကတ် သတိပေးချက်များ အရေးပေါ်အတွက်ခေါ်သည် မှတ်စုများ တံဆိပ်များ စက်ဝိုင်းများ HR ပုံစံ ကူပွန် စာရင်းအဖွဲ့ ကျည်ဆံမပါတဲ့ စာရင်း တုံ့ပြန်သောစာသား Cutout စာသား တောက်ပသောစာသား ပုံသေ အောက်ခြေ စေးကပ်သောဒြပ်စင် တူညီသောအမြင့် ရှင်းလင်းချက် တုံ့ပြန်မှု Floats Snackbar မျက်နှာပြင်အပြည့် ပြတင်းပေါက် Scroll Drawing Smooth Scroll Gradient Bg Scroll ကပ်နေသော ခေါင်းစီး Scroll တွင် ခေါင်းစီးကို လျှော့ပါ။ စျေးနှုန်းဇယား Parallax အချိုးအစား တုံ့ပြန်မှု iframes ကြိုက်/မကြိုက် ခလုတ်ဖွင့်ပါ။ ဖျောက်/ပြရန် ပြောင်းရန် အမှောင်မုဒ်ကို ပြောင်းပါ။ စာသားပြောင်းပါ။ အတန်းပြောင်းရန် အတန်းကိုထည့်ပါ။ အတန်းကို ဖယ်ရှားပါ။ Active အတန်း သစ်ပင်မြင်ကွင်း ပစ္စည်းကို ဖယ်ရှားပါ။ အော့ဖ်လိုင်း ထောက်လှမ်းခြင်း။ Hidden Element ကိုရှာပါ။ ဝဘ်စာမျက်နှာကို ပြန်ညွှန်းပါ။ Zoom Hover Flip Box ဒေါင်လိုက်ဗဟို DIV ရှိ အလယ်ခလုတ် Hover တွင် အကူးအပြောင်း မြှားများ၊ ပုံစံမျိုးစုံ ဒေါင်းလုဒ်လင့် အမြင့်ဒြပ်စင် Browser Window စိတ်ကြိုက် Scrollbar Scrollbar ကို ဖျောက်ပါ။ ပြ/အတင်း Scrollbar ကိရိယာကို ကြည့်ပါ။ Contenteditable Border နေရာယူသူ အရောင် စာသားရွေးချယ်မှု အရောင် ကျည်ဆန်အရောင် ဒေါင်လိုက်မျဉ်း ပိုင်းခြားခြင်း။ Animate အိုင်ကွန်များ Countdown Timer လက်နှိပ်စက် Page မကြာမီလာမည် ချတ်မက်ဆေ့ချ်များ Popup Chat Window Split Screen သက်သေခံချက်များ အခန်းကောင်တာ Quotes Slideshow ပိတ်နိုင်သော ပစ္စည်းများစာရင်း ပုံမှန် စက်ပစ္စည်း ဖြတ်ပိုင်းများ ဆွဲယူနိုင်သော HTML Element JS မီဒီယာမေးခွန်းများ Syntax Highlighter JS Animations JS ကြိုးအရှည် JS အညွှန်းကိန်း JS Default Parameters လက်ရှိ URL ကိုရယူပါ။ လက်ရှိ မျက်နှာပြင်အရွယ်အစားကို ရယူပါ။ Iframe Elements ကိုရယူပါ။

ဝဘ်ဆိုဒ်

အခမဲ့ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Website တစ်ခုလုပ်ပါ။ Static Website တစ်ခုလုပ်ပါ။ ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (W3.CSS) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS3) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS4) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS5) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပြီး ကြည့်ရှုပါ။ Link Tree ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Portfolio တစ်ခုဖန်တီးပါ။ Resume တစ်ခုဖန်တီးပါ။ စားသောက်ဆိုင် Website တစ်ခုလုပ်ပါ။ Business Website တစ်ခုလုပ်ပါ။ WebBook တစ်ခုဖန်တီးပါ။ စင်တာဝဘ်ဆိုဒ် ဆက်သွယ်ရန်အပိုင်း Page အကြောင်း ခေါင်းစီးကြီး နမူနာ ဝဘ်ဆိုဒ်

ဂရစ်

2 ကော်လံ အပြင်အဆင် 3 ကော်လံ အပြင်အဆင် 4 Column Layout ဇယားကွက်ချဲ့ခြင်း။ စာရင်းဇယားကွက်မြင်ကွင်း ရောစပ်ထားသော ကော်လံ အပြင်အဆင် ကော်လံကတ်များ Zig Zag အပြင်အဆင် ဘလော့ အပြင်အဆင်

Google

Google Charts Google Fonts Google ဖောင့်အတွဲများ Google Analytics ကို စနစ်ထည့်သွင်းပါ။

ဘာသာပြန်များ

Weight ပြောင်းပါ။ အပူချိန်ပြောင်းပါ။ အရှည်ပြောင်းပါ။ မြန်နှုန်းကိုပြောင်းပါ။

ဘလော့

Developer အလုပ်တစ်ခုရယူပါ။ Front-End Dev ဖြစ်လာပါ။

လုပ်နည်း - Clickable 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">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</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: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* 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: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  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: #ddd}

/* 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-width160px ဟု သတ်မှတ်ထားသည်ကို သတိပြုပါ ။ ဒါကို ပြောင်းလဲဖို့ အားမနာပါနဲ့။ အကြံပြုချက်- dropdown content ၏ အကျယ်ကို dropdown button ကဲ့သို့ ကျယ်လိုပါက၊ width100% (နှင့် overflow:autoသေးငယ်သော ဖန်သားပြင်များပေါ်တွင် scroll လုပ်ရန်) ကို သတ်မှတ်ပါ။

ဘောင်ကိုအသုံးပြုမည့်အစား၊ box-shadowdropdown menu ကို "ကတ်" နှင့်တူအောင်ပြုလုပ်ရန် ကျွန်ုပ်တို့သည် ပိုင်ဆိုင်မှုကို အသုံးပြုထားသည်။ အခြားဒြပ်စင်များရှေ့တွင် dropdown ကို နေရာချရန် z-index ကိုလည်း အသုံးပြုပါသည်။



အဆင့် 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");
}

// Close the dropdown menu if the user clicks outside of it
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');
      }
    }
  }
}

ညာဘက်ညှိထားသော ဆွဲချ

ဥပမာ


Navbar ရှိ Dropdown Menu

ဥပမာ


ရှာရန် (Filter) Dropdown

ဥပမာ

အကြံပြုချက်- dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Dropdowns Tutorial သို့ သွားပါ ။

အကြံပြုချက်- အလျားလိုက်လုပ်နိုင်သော dropdowns များအကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ Hoverable Dropdowns သို့ သွားပါ ။