Cách tạo: thanh bên cố định

Tạo thanh bên cố định

Bước 1 - Thêm HTML:

<!-- Hướng dẫn bên cạnh -->
<div class="sidenav">
  <a href="#">Giới thiệu</a>
  <a href="#">Dịch vụ</a>
  <a href="#">Khách hàng</a>
  <a href="#">Liên hệ</a>
</div>
<!-- Nội dung trang -->
<div class="main">
  ...
</div>

Bước 2 - Thêm CSS:

/* Menu thanh bên */
.sidenav {
  height: 100%; /* Chiều cao toàn màn hình: Nếu bạn muốn chiều cao tự động, hãy xóa cài đặt này */
  width: 160px; /* Thiết lập chiều rộng thanh bên */
  position: fixed; /* Thanh bên cố định (để lại ở vị trí ban đầu khi cuộn) */
  z-index: 1; /* Luôn保持在 trên cùng */
  top: 0; /* Luôn保持在 trên cùng */
  left: 0;
  background-color: #111; /* Màu đen */
  overflow-x: hidden; /* Tắt cuộn ngang */
  padding-top: 20px;
}
/* Liên kết trong menu hướng dẫn */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* Khi bạn đặt con trỏ chuột lên liên kết hướng dẫn, thay đổi màu sắc của nó */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Thiết lập phong cách nội dung trang */
.main {
  margin-left: 160px; /* Cùng với chiều rộng thanh bên */
  padding: 0px 10px;
}
/* Trong màn hình nhỏ hơn 450 pixel về chiều cao, thay đổi phong cách thanh bên (vài hơn không gian biên và font-size nhỏ hơn)*/
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Trang liên quan

Giáo trình:Thanh điều hướng CSS

Giáo trình:Cách tạo thanh điều hướng bên