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ụngLiên kết trong dònghoặcNổiDanh sách mục

Yếu tố liên kết trong dòng

Một cách để xây dựng thanh điều hướng ngang là, ngoài mã tiêu chuẩn trong chương trước, còn quy định yếu tố <li> là inline:

Thí dụ

li {
  display: inline;
}

Thử trực tiếp

Giải thích ví dụ:

display: inline; - Theo mặc định, yếu tố <li> là yếu tố khối. Ở đây, chúng ta xóa ký tự mới dòng trước và sau mỗi mục danh sách để chúng có thể hiển thị trên một dòng.

Liên kết nổi

Một cách khác để tạo thanh điều hướng ngang là làm nổi <li> và quy định布局 cho liên kết điều hướng:

Thí dụ

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Thử trực tiếp

Giải thích ví dụ:

  • float: left; - Sử dụng float để di chuyển các yếu tố khối bên cạnh nhau
  • display: block; - Hiển thị liên kết như một yếu tố khối để toàn bộ khu vực liên kết có thể được nhấp vào (không chỉ văn bản), và cho phép chúng ta chỉ định lấp đầy (nếu cần, còn có thể chỉ định chiều cao, chiều rộng, margin, v.v.):
  • padding: 8px; - Làm cho các yếu tố khối đẹp hơn
  • background-color: #dddddd; - Thêm màu nền xám cho mỗi yếu tố

Lưu ý:Nếu muốn nền có độ rộng toàn màn hình, hãy thêm background-color vào <ul> thay vì mỗi yếu tố <a>:

Thí dụ

ul {
  background-color: #dddddd;
}

Thử trực tiếp

Mẫu thanh điều hướng ngang

Tạo thanh điều hướng ngang có màu nền đậm và thay đổi màu nền của liên kết khi người dùng di chuột lên trên liên kết:

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;
  canh chữ giữa
  keo: 14px 16px;
  decoration văn bản: không;
}
/* Khi chuột悬停时将链接颜色更改为 #111 (đen) */
li a:hover {
  màu nền: #111;
}

Thử trực tiếp

Liên kết điều hướng hoạt động/trang hiện tại

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:

Thí dụ

.active {
  màu nền: #4CAF50;
}

Thử trực tiếp

Canh phải liên kết

Bằng cách làm cho mục danh sách trôi phải để canh phải liên kết (float:right;）：

Thí dụ

<ul>
  <li><a href="#home">Trang chủ</a></li>
  <li><a href="#news">Tin tức</a></li>
  <li><a href="#contact">Liên hệ</a></li>
  <li style="float:right"><a class="active" href="#about">Giới thiệu</a></li>
</ul>

Thử trực tiếp

cột biên

thêm biên phải thuộc tính này vào <li> để tạo dấu cách liên kết:

Thí dụ

/* Thêm biên màu xám vào tất cả các mục danh sách, trừ mục cuối cùng (last-child) */
li {
  biên phải: 1px soli #bbb;
}
li:last-child {
  biên phải: không;
}

Thử trực tiếp

Thanh điều hướng cố định

Giữ thanh điều hướng ở đỉnh hoặc dưới cùng của trang, ngay cả khi người dùng cuộn trang cũng vậy:

Đính kèm ở trên cùng

ul {
  định vị: cố định;
  top: 0;
  chiều rộng: 100%;
}

Thử trực tiếp

Đính kèm ở dưới cùng

ul {
  định vị: cố định;
  dưới cùng: 0;
  chiều rộng: 100%;
}

Thử trực tiếp

Lưu ý:Định vị 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

Thí dụ thanh điều hướng ngang màu xám có viền xám mờ

Thí dụ

ul {
  biên: 1px soli #e7e7e7;
  màu nền: #f3f3f3;
}
li a {
  màu: #666;
}

Thử trực tiếp

thanh điều hướng dính

thêm position: sticky;để tạo thanh điều hướng dính.

Các yếu tố dính sẽ chuyển đổi giữa tương đối và cố định dựa trên vị trí cuộn. Nó được định vị tương đối cho đến khi gặp vị trí dịch chuyển được chỉ định trong khung nhìn - sau đó sẽ dán nó vào vị trí thích hợp (ví dụ: position:fixed).

Thí dụ

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Thử trực tiếp

Lưu ý:Trình duyệt Internet Explorer, Edge 15 và các phiên bản trước không hỗ trợ vị trí dính. Safari cần tiền tố -webkit- (xin xem ví dụ trên). Bạn cũng cần phải chỉ định top、right、bottom hoặc left Ít nhất một trong số đó để làm cho vị trí dính hoạt động.

Thực hành thêm

Thanh 导航栏 trên cùng tương ứng
Cách sử dụng truy vấn truyền thông CSS để tạo thanh 导航栏 trên cùng.
Thanh 导航栏 tương ứng
Cách sử dụng truy vấn truyền thông CSS để tạo thanh 导航栏 tương ứng.
Thanh 导航栏 thả xuống
Cách thêm menu thả xuống vào thanh 导航栏.