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 <a> các phần tử bên trong danh sách, ngoài mã từ trang trước:
Thí dụ
li a
{
display: block;
width: 60px;
}
Ví dụ được giải thích:
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 tôi 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 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 của chúng tôi:
Thí dụ
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 các liên kết khi người dùng di chuyển chuột qua chúng:
Thí 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;
}
Liên kết Điều hướng Hoạt động / Hiện tại
Thêm một lớp "đang hoạt động" vào liên kết hiện tại để cho người dùng biết họ đang truy cập trang nào:
Thí dụ
.active {
background-color: #04AA6D;
color: white;
}
Liên kết trung tâm & thêm đường viền
Thêm text-align:centervào <li> hoặc <a> để căn giữa các liên kết.
Thêm thuộc bordertính để <ul> thêm đường viền xung quanh thanh điều hướng. Nếu bạn cũng muốn các đường viền bên trong thanh điều hướng, hãy thêm a border-bottomvào tất cả các phần tử <li>, ngoại trừ phần tử cuối cùng:
Thí dụ
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 dọc cố định có chiều cao đầy đủ
Tạo điều hướng bên "cố định" có chiều cao đầy đủ:
Thí 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 */
}
Lưu ý: Ví dụ này có thể không hoạt động bình thường trên thiết bị di động.