Thanh điều hướng dọc CSS
Thanh điều hướng dọc
Để tạo thanh điều hướng dọc, bạn có thể tạo kiểu cho các phần tử <a> bên trong danh sách, ngoài mã từ trang trước:
Ví dụ giải thích:
-
display: block;- Hiển thị các liên kết dưới dạng các thành phần khối làm cho toàn bộ khu vực liên kết có thể nhấp vào được (không chỉ văn bản) và nó cho phép chúng ta chỉ định chiều rộng (và phần đệm, lề, chiều cao, v.v. 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 tôi muốn chỉ định chiều rộng 60 pixel
Bạn cũng có thể đặt chiều rộng của <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 phần tử khối. Điều này sẽ tạo ra kết quả tương tự như ví dụ trước của chúng tôi:
Ví dụ
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Hãy tự mình thử » 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 các liên kết khi người dùng di chuyển chuột qua chúng:
Ví dụ
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;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Hãy tự mình thử »Liên kết điều hướng hiện tại/đang hoạt động
Thêm một lớp "hoạt động" vào liên kết hiện tại để cho người dùng biết họ đang ở trang nào:
Liên kết trung tâm & Thêm đường viền
Thêm text-align:center vào <li> hoặc <a> để căn giữa các liên kết.
Thêm thuộc tính border để <ul> thêm đường viền xung quanh thanh điều hướng. Nếu bạn cũng muốn có đường viền bên trong thanh điều hướng, hãy thêm border-bottom vào tất cả các phần tử <li>, ngoại trừ phần tử cuối cùng:
Ví dụ
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Hãy tự mình thử »Thanh điều hướng dọc cố định có chiều cao đầy đủ
Tạo điều hướng bên có chiều cao đầy đủ, "dính":
Ví dụ
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Hãy tự mình thử »Lưu ý: Ví dụ này có thể không hoạt động bình thường trên thiết bị di động.
