အောက်ပံချို့လုံး အမှတ်ပုံနှိပ်ခြင်း အစီအစဉ်

အောက်ပံချို့လုံး အမှတ်ပုံနှိပ်ခြင်း ကို ဖန်တီးခြင်း

第一步 - အစီအစဉ် HTML ထပ်ထည့်ခ�င်း

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

第二步 - အစီအစဉ် CSS ထပ်ထည့်ခြင်း

/* အကွက်နိမ့်တွင် ချို့လုံး အကြောင်းရေး အော်ဆိုင် */
#mySidenav a {
  position: absolute; /* ကွန်ပျူတာ ပွဲစဉ် ခုံးချိန် */
  left: -80px; /* အရှေ့အောက် 80px တွင် ခုံးချိန် */
  transition: 0.3s; /* အမှတ်ပုံနှိပ်ခြင်း အသွားသွားလာလာ 0.3s */
  padding: 15px; /* 15px အကွက်နိမ့် */
  width: 100px; /* အကြောင်းရေး အနှံထိပ် */
  text-decoration: none; /* အကြောင်းရေး နှေးကွက်ထား */
  font-size: 20px; /* အကြောင်းရေး အရွယ် အသုံးပြု */
  color: white; /* အကြောင်းရေး အရောင် အမြတ် */
  border-radius: 0 5px 5px 0; /* အရှေ့အောက်အရိယ နှင့် အောက်အရိယ အဆိုင်းအောင် */
}
#mySidenav a:hover {
  left: 0; /* အမှတ်ပုံနှိပ်ခြင်းအခါ အကိုယ်အောင် ပြုပြင်သင် */
}
/* about ချို့လုံး: အောက်ပံတစ်ဝက် 20px, အငွေအောင်ရောင်အရိယ */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* သစ်ရောင် */
}
#projects {
  top: 140px;
  background-color: #f44336; /* ကြေးရောင် */
}
#contact {
  top: 200px;
  background-color: #555 /* အမရုံးအရောင် */
}

亲自试一试

相关页面

教程：CSS 导航栏