ဘယ်လို

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

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု 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 ဖြစ်လာပါ။

- Side Navigation လုပ်နည်း


ကာတွန်း၊ ပိတ်နိုင်သော ဘေးထွက်လမ်းညွှန်မီနူးကို ဖန်တီးနည်းကို လေ့လာပါ။








လှုပ်ရှားနေသော ဘေးထွက်လမ်းညွှန်မှုတစ်ခု ဖန်တီးပါ။

အဆင့် 1) HTML ကိုထည့်ပါ

ဥပမာ

<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>

အဆင့် 2) CSS ကိုထည့်ပါ

ဥပမာ

/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


အဆင့် 3) JavaScript ကိုထည့်ပါ။

အောက်ဖော်ပြပါ ဥပမာသည် ဘေးဘက်လမ်းညွှန်မှုတွင် slide လုပ်ပြီး 250px ကျယ်စေသည်-

Sidenav Overlay ဥပမာ

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

အောက်ဖော်ပြပါ ဥပမာသည် ဘေးဘက်လမ်းညွှန်မှုတွင် ဆလိုက်လိုက်ပြပြီး စာမျက်နှာအကြောင်းအရာကို ညာဘက်သို့ တွန်းပို့သည် (sidenav ၏ width ကိုသတ်မှတ်ရန်အသုံးပြုသည့်တန်ဖိုးကို "စာမျက်နှာအကြောင်းအရာ" ၏ ဘယ်ဘက်အနားသတ်သတ်မှတ်ရန်အတွက်လည်း အသုံးပြုသည်))

Sidenav Push အကြောင်းအရာ

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

အောက်ဖော်ပြပါ ဥပမာသည် ဘေးဘက်လမ်းညွှန်မှုတွင် လျှောကျသွားကာ စာမျက်နှာအကြောင်းအရာကို ညာဘက်သို့ တွန်းပို့သည်၊ ယခုတစ်ကြိမ်တွင်၊ ဘေးဘက်လမ်းညွှန်ချက်ကို "မီးမောင်းထိုးပြရန်" 40% opacity ရှိသော အနက်ရောင်နောက်ခံအရောင်ကို ကိုယ်ထည်ဒြပ်စင်သို့ ထည့်သည်-

Sidenav Push အကြောင်းအရာ

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

အောက်ဖော်ပြပါ ဥပမာသည် ဘယ်ဘက်မှ ဘေးဘက်လမ်းညွှန်ချက်တွင် slide လုပ်ပြီး စာမျက်နှာတစ်ခုလုံး (100% အကျယ်)

Sidenav အကျယ်အဝန်း-

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

အောက်ဖော်ပြပါ ဥပမာသည် ကာတွန်းမပါပဲ ဘေးထွက်လမ်းညွှန်မီနူးကို ဖွင့်ပြီး ပိတ်သည်-

အန်နီမေးရှင်းမပါဘဲ Sidenav

/* Open the sidenav */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

အောက်ဖော်ပြပါ ဥပမာသည် ညာဘက်ခြမ်း လမ်းညွှန်မီနူးကို ဖန်တီးနည်းကို ပြသသည်-

ညာခြမ်း လမ်းညွှန်ချက်-

.sidenav {
  right: 0;
}

အောက်ဖော်ပြပါ ဥပမာသည် အမြဲတမ်းပြသထားသည့် ဘေးထွက်လမ်းညွှန်မီနူးကို ဖန်တီးနည်းကို ပြသသည် (ပုံသေ)။

အမြဲတမ်း sidenav ကိုပြပါ

/* The sidenav */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Page content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
}

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

W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင့်ဝဘ်ဆိုဒ်ကို အစမှအဆုံး ဖန်တီးနိုင်သည် သို့မဟုတ် နမူနာပုံစံတစ်ခုကို အသုံးပြုကာ ၎င်းကို အခမဲ့ လက်ခံဆောင်ရွက်ပေးနိုင်သည်။

❯ အခမဲ့ စတင်လိုက်ပါ။

* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။