Bài 30: Thanh điều hướng dọc trong CSS

Thanh điều hướng dọc (Vertical Navigation Bar)

Để xây dựng một thanh điều hướng dọc, bạn có thể tạo kiểu cho phần tử <a> bên trong danh sách:

li a {
  display: block;
  width: 60px;
}

Giải thích ví dụ:

• display: block;– Hiển thị các liên kết dưới dạng phần tử khối làm cho toàn bộ khu vực liên kết có thể nhấp được (không chỉ văn bản) và nó cho phép chúng ta chỉ định chiều rộng (padding, margin, height, … nếu bạn muốn)
• width: 60px; – Các phần tử khối chiếm toàn bộ chiều rộng có sẵn theo mặc định. Chúng ta muốn chỉ định chiều rộng 60 pixel

Bạn cũng có thể đặt chiều rộng của phần tử <ul> , và xóa chiều rộng của <a> , vì chúng sẽ chiếm toàn bộ chiều rộng có sẵn khi được hiển thị dưới dạng các phần tử khối. Điều này sẽ tạo ra kết quả tương tự như ví dụ trước:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
}

li a {
  display: block;
}

Ví dụ về thanh điều hướng dọc

Tạo thanh điều hướng dọc cơ bản với màu nền xám và thay đổi màu nền của liên kết khi người dùng di chuyển chuột lên chúng:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Thay đổi màu liên kết khi di chuột  */
li a:hover {
  background-color: #555;
  color: white;
}

Kích hoạt / hiện tại của liên kết

Thêm “active” vào liên kết hiện tại để người dùng biệt trang họ đang xem:

.active {
  background-color: #4CAF50;
  color: white;
}

Căn giữa liên kết và thêm đường viền

Thêm text-align:center và <li> hoặc <a> để căn giữa liên kết.
Thêm thuộc tính border vào <ul> để thêm đường viền xung quanh thanh điều hướng. Nếu bạn cũng muốn đường viền nằm bên trong thanh điều hướng, thêm border-bottom vào tất cả phần tử <li>, ngoại trừ phần tử cuối cùng:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

Thanh điều hướng theo chiều dọc cố định có chiều cao

Tạo một thanh điều hướng có chiều cao tối đa, cố định ở bên trái:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Chiều cao tối đa */
  position: fixed; 
  overflow: auto; /* Bật thanh cuộn nếu sidenav có quá nhiều nội dung */
}