ပြုလုပ်ခြင်းသဘော: ကျယ်ပြန့်သောဘက်ခွဲ

အပြဿာပ်သည့် ဘယ်လ်ဘိုင်ဂိုး လိုင်းတိုက် ဖန်တီးပါ

ပထမပုံ - အစီအစဥ် HTML ထပ်ပေးပါ

<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<div id="main">
  <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
  <h2>Collapsed Sidebar</h2>
  <p>Content...</p>
</div>

ဒုတိယပုံ - အစီအစဥ် CSS ထပ်ပေးပါ

/* ဘယ်လ်ဘိုင်ဂိုး လိုင်းတိုက် */
.sidebar {
  height: 100%; /* ၁၀၀% အရှည်ရှိ */
  width: 0; /* ၀ ပမာဏ */
  position: fixed; /* အခြေခံစက် ထိပ်တန်း */
  z-index: 1; /* အပြင်ဘက် ထိပ်တန်း */
  top: 0;
  left: 0;
  background-color: #111; /* ရောင်ရှား */
  overflow-x: hidden; /* လှိုင်းဆိပ်ခြင်း ပိတ်တတ် */
  padding-top: 60px; /* အရောင်းတွင် ၆၀ ပမာဏ ခွင့်ပြု */
  transition: 0.5s; /* လှိုင်းဆိပ် ၀.၅ စက္ကန့် လှိုင်းဆိပ်ခြင်း */
}
/* ဘယ်လ်ဘိုင်ဂိုး လိုင်းတိုက် */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* ကော်ပရာတိုက် ကို လှိုင်းဆိပ်တွင် သွင်းချင်ရာအခါ အရောင်ပြောင်းသည် */
.sidebar a:hover {
  color: #f1f1f1;
}
/* ဆက်သွယ်ရာ အချင်းအရွယ် နှင့် အစိတ်အတိုင်း ပြုပြင်တယ် (အရှေ့ဘက် အချင်း အတွက်) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* ဆက်သွယ်ရာ ဆက်သွယ်ရာ အချင်းအရွယ် အသုံးပြုတယ် */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}
.openbtn:hover {
  background-color: #444;
}
/* ဆက်သွယ်ရာ အရွယ် ဖွင့်တယ် အခါ အခြား အရွယ် အတွက် အချင်းအရွယ် ပြုပြင်တယ် - သင် ဆက်သွယ်ရာ အရွယ် အချင်း အတွက် သုံးတာ ဖို့ အချင်းအရွယ် အသုံးပြုတယ် */
#main {
  transition: margin-left .5s; /* ကိုယ်စားပြီး လမ်းကြောင်း အပျက်အထား လုပ်ဆောင်တယ် */
  padding: 20px;
}
/* အရွယ် 450 ပေါင်း ကျော်သော အနောက်ဘက် အချင်း အတွက် ဆက်သွယ်ရာ အစိတ်အတိုင်း ပြောင်းလဲတယ် (အဆိုးကြို အဆိုးအချင်း နှင့် အကွယ်အချင်း လျော့ကျတယ်) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

သတ်မှတ် 3 - ဂျစ်တာစက် ထပ်ပေါင်းတယ်:

/* ဆက်သွယ်ရာ အရွယ် 250ပေါင်း အခြား အရွယ် 250ပေါင်း ကင်းစေတယ် */
function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* ဆက်သွယ်ရာ နေရာများ အရွယ် 0 ကင်းစေတယ် အခြား အရွယ် 0 ကင်းစေတယ် */
function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

相关页面

教程：CSS 导航栏