Thanh điều hướng dọc CSS

Khuyến nghị khóa học:

Thanh điều hướng dọc

Example

width: 200px;
  li a {
  Bạn cũng có thể thiết lập chiều rộng của <ul> và xóa chiều rộng của <a>, vì khi hiển thị như một phần tử khối, chúng sẽ chiếm toàn bộ chiều rộng có sẵn. Điều này sẽ dẫn đến kết quả tương tự như ví dụ trước:
}

Try It Yourself

Để xây dựng thanh điều hướng dọc, ngoài mã trong chương trước, bạn cũng có thể thiết lập樣式 cho phần tử <a> trong danh sách:

  • li a { Giải thích ví dụ:
  • Bạn cũng có thể thiết lập chiều rộng của <ul> và xóa chiều rộng của <a>, vì khi hiển thị như một phần tử khối, chúng sẽ chiếm toàn bộ chiều rộng có sẵn. Điều này sẽ dẫn đến kết quả tương tự như ví dụ trước: - Hiển thị liên kết như một phần tử khối sẽ cho phép toàn bộ khu vực liên kết có thể được nhấp (không chỉ văn bản), chúng ta cũng có thể chỉ định chiều rộng (nếu cần, chúng ta cũng có thể chỉ định lề trong, lề ngoài, chiều cao, v.v.).

- Mặc định, phần tử khối sẽ chiếm toàn bộ chiều rộng có sẵn. Chúng ta cần chỉ định chiều rộng 60 pixel.

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Bạn cũng có thể thiết lập chiều rộng của <ul> và xóa chiều rộng của <a>, vì khi hiển thị như một phần tử khối, chúng sẽ chiếm toàn bộ chiều rộng có sẵn. Điều này sẽ dẫn đến kết quả tương tự như ví dụ trước:
} 
width: 200px;
  li a {
}

Try It Yourself

width: 60px;

Mô hình thanh điều hướng dọc

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  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 liên kết khi người dùng di chuột qua liên kết:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Thay đổi màu sắc liên kết khi con trỏ chuột nằm trên liên kết */
  li a:hover {
  background-color: #4CAF50;
}

Try It Yourself

background-color: #555;

liên kết hoạt động/trang hiện tại

Example

thêm lớp "active" vào liên kết hiện tại để người dùng biết họ đang ở trang nào:
  .active {
  background-color: #4CAF50;
}

Try It Yourself

color: white;

Để làm cho liên kết nằm giữa và thêm viền text-align:center thêm vào <li> hoặc <a> để làm cho liên kết nằm giữa.

thêm border thêm thuộc tính này vào <ul>, thêm viền xung quanh thanh điều hướng. Nếu bạn muốn thêm viền vào thanh điều hướng trong, hãy thêm thuộc tính này cho tất cả các <li>元素 border-bottomtrừ cho phần tử cuối cùng:

Example

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

Try It Yourself

Full-height Fixed Vertical Navigation Bar

Create a full-height 'sticky' side navigation:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it sticky, even when scrolling */
  overflow: auto; /* If the sidebar content is too much, enable the scrollbar */
}

Try It Yourself

Note:This example may not work properly on mobile devices.