တူးဖက်ပြီး ဘယ်အရပ်ကို ဖွင့်ပေးရန်

အခြေခံ ဘယ်ဆိုက်ဘက် လမ်းကြောင်း

ပထမပုံ - HTML ထပ်ထည့်ပါ

<!-- Side navigation -->
<div class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- စားပွဲ အရေးပါသော အချက်အလက် -->
<div class="main">
  ...
</div>

ဒုတိယပုံ - CSS ထပ်ထည့်ပါ

/* ဘယ်ဆိုက်ဘက် လမ်းကြောင်း အစီအစဉ် */
.sidenav {
  height: 100%; /* အုတ်မြစ် အမြင့် (အဆိုင်းအယောဉ် 'အဆိုင်းအယောဉ် အရွယ်' ကို ဖျက်သိမ်းကြည့် လို့ ဆိုချက်) */
  width: 160px; /* ဘယ်ဆိုက်ဘက် အကျယ်အဝန်း ကျပ် */
  position: fixed; /* ဘယ်ဆိုက်ဘက် လမ်းကြောင်း အခြေခံအဆိုင်းအယောဉ် (လျှော့ပျက်သွားခြင်း အခါ အရှိန်ထိပ်တွင် ခံနေပါ) */
  z-index: 1; /* အထိပ်တွင် ခံနေပါ */
  top: 0; /* အထိပ်တွင် ခံနေပါ */
  left: 0;
  background-color: #111; /* ရေတွေး */
  overflow-x: hidden; /* လုံးပါး လမ်းကြောင်း လွှတ်တာ အဖြစ် ပိတ်ဆို့ */
  padding-top: 20px;
}
/* ဘယ်ဆိုက်ဘက် လမ်းကြောင်း အစီအစဉ် */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* ကျော်ကြည်းမှာ ဘယ်ဆိုက်ဘက် လမ်းကြောင်းများ အရောင် ပြောင်းလဲကြည့် */
.sidenav a:hover {
  color: #f1f1f1;
}
/* စားပွဲ အစီအစဉ် အဆိုင်းအယောဉ် */
.main {
  margin-left: 160px; /* ဘယ်ဆိုက်ဘက် အကျယ်အဝန်းနှင့် ညှိ */
  padding: 0px 10px;
}
/* အမြင့် 450 ပမာဏ အောက်ရှိ သေးငယ်သော အိမ်ဖုံးများတွင် ဘယ်ဆိုက်ဘက် ပြောင်းလဲကြည့် (အဆင်းအတ္ထ နည်းပါးသော အဆိုင်းအယောဉ် နှင့် အဆိုင်းအယောဉ်အရွယ် သိသိသာသာ) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

相关页面

教程：CSS 导航栏

教程：如何创建侧导航栏