Thanh css

Một cách khác để tạo thanh điều hướng ngang là thay đổi phần tử li và xác định bố cục cục bộ cho liên kết điều hướng

li {
  float: left;
}

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

Giải thích ví dụ

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

  2 – Sử dụng float để đặt các phần tử khối trượt cạnh nhau

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

  3 – Cho phép chúng tôi xác định phần đệm (và chiều cao, chiều rộng, lề, … nếu bạn muốn)

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

  4 – Vì các phần tử khối chiếm toàn bộ chiều rộng sẵn có, chúng không thể trượt bên cạnh nhau. Vì vậy, chỉ định một số đệm để làm cho chúng trông đẹp mắt hơn

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

  5 – Thêm màu nền xám vào mỗi phần tử

Mẹo: Thêm màu nền vào

thay vì mỗi phần tử nến bạn muốn màu nền toàn bộ chiều rộng:

ul {
  background-color: #dddddd;
}

Ví dụ về thanh điều hướng ngang

Tạo một thanh điều hướng ngang cơ bản với màu nền tối và thay đổi màu nền với các liên kết khi người dùng di chuyển chuột qua chúng

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;
}

/* Thay đổi màu liên kết thành #111 (black) khi di chuột */
li a:hover {
  background-color: #111;
}

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

Thêm lớp “hoạt động” vào đường dẫn hiện tại để người dùng biết họ đang xem trên các liên kết nào


.active {
  background-color: #4CAF50;
}

Căn phải liên kết

Căn phải liên kết bởi floating để liên kết nằm ở phía bên tay phải (

li {
  float: left;
}

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

6)


Home
News
Contact
About

Thêm đường viền vào các liên kết điều hướng

Thêm thuộc tính

li {
  float: left;
}

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

7 vào
• để tạo phân chia liên kết:
  

  
  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%;
  }
  

  Đáy cố định

  
  ul {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  

  Lưu ý. Ví dụ về khả năng không hoạt động bình thường trên thiết bị di động

  Thanh điều hướng màu xám

  Ví dụ về thanh điều hướng ngang màu xám với đường viền sáng màu xám
  

  
  ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
  }
  
  li a {
    color: #666;
  }
  

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

  Thêm

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

  8 vào
  để tạo điều hướng dính.
  Một phần tử cố định được chuyển đổi giữa tương đối và cố định, tùy thuộc vào vị trí cuộn. Nó được xác định vị trí tương đối khi một vị trí bù trừ nhất định được trả lời trong các khung – sau đó nó “nhìn” vào vị trí (như vị trí. đã sửa)

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

  0

  Lưu ý. Internet Explorer không hỗ trợ định vị trí. Safari request money -webkit- (xem ví dụ ở trên). Bạn phải chỉ định ít nhất một trong các vị trí

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

  9,

  
  ul {
    background-color: #dddddd;
  }
  

  0,

  
  ul {
    background-color: #dddddd;
  }
  

  1 hoặc

  
  ul {
    background-color: #dddddd;
  }
  

  2 cũng như để định vị trí hoạt động