Thanh điều hướng ngang CSS
Thanh điều hướng ngang
Có hai cách để tạo thanh điều hướng ngang. Sử dụng các mục danh sách nội tuyến hoặc nổi .
Mục danh sách nội tuyến
Một cách để xây dựng thanh điều hướng ngang là chỉ định các phần tử <li> làm nội tuyến, bên cạnh mã "chuẩn" từ trang trước:
Ví dụ giải thích:
-
display: inline;- Theo mặc định, phần tử <li> là phần tử khối. Ở đây, chúng tôi loại bỏ các ngắt dòng trước và sau mỗi mục danh sách để hiển thị chúng trên một dòng
Mục danh sách nổi
Một cách khác để tạo thanh điều hướng ngang là thả nổi các phần tử <li> và chỉ định bố cục cho các liên kết điều hướng:
Ví dụ
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Hãy tự mình thử »Ví dụ giải thích:
-
float: left;- Sử dụng float để các phần tử khối nổi cạnh nhau -
display: block;- Cho phép chúng tôi chỉ định phần đệm (và chiều cao, chiều rộng, lề, v.v. nếu bạn muốn) -
padding: 8px;- Chỉ định một số khoảng đệm giữa mỗi phần tử <a> để làm cho chúng trông đẹp mắt -
background-color: #dddddd;- Thêm màu nền xám cho mỗi phần tử <a>
Mẹo: Thêm màu nền vào <ul> thay vì mỗi phần tử <a> nếu bạn muốn màu nền có chiều rộng đầy đủ:
Ví dụ về thanh điều hướng ngang
Tạo thanh điều hướng ngang cơ bản với màu nền tối 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;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} 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 căn phải
Căn phải các liên kết bằng cách thả nổi các mục danh sách sang bên phải ( float:right; ):
Ví dụ
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Hãy tự mình thử »Bộ chia biên giới
Thêm thuộc tính border-right vào <li> để tạo bộ chia liên kết:
Ví dụ
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Hãy tự mình thử »Thanh điều hướng cố định
Đặt thanh điều hướng ở đầu hoặc cuối trang, ngay cả khi người dùng cuộn trang:
Lưu ý: Vị trí cố định có thể không hoạt động chính xác trên thiết bị di động.
Thanh điều hướng ngang màu xám
Ví dụ về thanh điều hướng ngang màu xám có viền mỏng màu xám:
Ví dụ
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Hãy tự mình thử »Thanh điều hướng dính
Thêm position: sticky; đến <ul> để tạo thanh điều hướng cố định.
Phần tử cố định chuyển đổi giữa tương đối và cố định, tùy thuộc vào vị trí cuộn. Nó được định vị tương đối cho đến khi gặp một vị trí bù nhất định trong khung nhìn - sau đó nó "cố định" tại chỗ (như vị trí: cố định).
Lưu ý: Internet Explorer không hỗ trợ định vị cố định. Safari yêu cầu tiền tố -webkit- (xem ví dụ ở trên). Bạn cũng phải chỉ định ít nhất một trong top , right , bottom hoặc left để định vị cố định hoạt động.
Thêm ví dụ
Topnav đáp ứng
Cách sử dụng truy vấn phương tiện CSS để tạo điều hướng hàng đầu phản hồi nhanh.
Sidenav đáp ứng
Cách sử dụng truy vấn phương tiện CSS để tạo điều hướng bên phản hồi.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng
