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 để tạo thanh điều hướng ngang là chỉ định các phần tử <li> dưới dạng nội dòng, ngoài mã "chuẩn" từ trang trước:
Thí dụ
li
{
display: inline;
}
Ví dụ được 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 xóa các dấu 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
Các mục trong danh sách nổi
Một cách khác để tạo thanh điều hướng ngang là làm 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:
Thí dụ
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Ví dụ được giải thích:
float: left;- Sử dụng float để có được các phần tử khối để nổi cạnh nhaudisplay: block;- Cho phép chúng tôi chỉ định khoảng đệ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ố phần đệm giữa mỗi phần tử <a> để làm cho chúng trông đẹp mắtbackground-color: #dddddd;- Thêm màu nền xám vào từng phần tử <a>
Mẹo: Thêm màu nền vào <ul> thay vì từng phần tử <a> nếu bạn muốn có màu nền toàn chiều rộng:
Thí dụ
ul
{
background-color: #dddddd;
}
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:
Thí 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;
}
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;
}
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;):
Thí 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>
Bộ phân chia biên giới
Thêm thuộc border-righttính vào <li> để tạo các bộ phân chia liên kết:
Thí 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;
}
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:
Đã cố định hàng đầu
ul {
position: fixed;
top: 0;
width: 100%;
}
Cố định dưới cùng
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Lưu ý: Vị trí cố định có thể không hoạt động bình thường 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 với đường viền mỏng màu xám:
Thí dụ
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Thanh điều hướng dính
Thêm position: sticky;vào <ul> để tạo một thanh điều hướng dính.
Một 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 vị trí bù nhất định trong khung nhìn - sau đó nó "dính" đúng vị trí (như vị trí: fixed).
Thí dụ
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
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 số tophoặc để rightđịnh vị cố định hoạt động.bottomleft
Các ví dụ khác
Topnav đáp ứng
Cách sử dụng truy vấn phương tiện CSS để tạo điều hướng trên cùng đáp ứng.
Sidenav đáp ứng
Cách sử dụng truy vấn phương tiện CSS để tạo điều hướng bên đáp ứng.
Thanh điều hướng thả xuống
Cách thêm menu thả xuống bên trong thanh điều hướng.
Bạn đã từng nghe về W3Schools Spaces ? 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