ວິທີການທີ່ສ້າງອຸນຫະພາບສັນຍານທາງຂ້າງ.

ສ້າງການພັກພັກກາງຄົງຄວາມຄືດີ

ບາງການສະໜັບສະໜູນທີໜຶ່ງ - ສະໜັບສະໜູນ HTML:

<!-- ພາຍໃສ່ທີ່ຂາຍທາງຂອງຂໍ້ມູນ -->
<div class="sidenav">
  <a href="#">ກ່ຽວກັບ</a>
  <a href="#">ບໍລິການ</a>
  <a href="#">ລູກຄ້າ</a>
  <a href="#">ຕິດຕາມ</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 导航栏

教程：如何创建侧导航栏