Bài 31: Thanh điều hướng ngang trong CSS

Thanh điều hướng ngang

Có hai cách để tạo thanh điều hướng ngang. Sử dụng danh sách inline hoặc floating.

Danh sách inline

Một cách để xây dựng thanh điều hướng ngang là xác định phần tử <li> trên cùng một dòng :

li {
  display: inline;
}

Giải thích ví dụ:
display: inline; – Mặc định, phần tử <li> là phần tử khối. Ở đây, chúng ta xóa dấu ngắt dòng trước và sau mỗi danh sách , hiển thị chúng trên một dòng.

Danh sách floating

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 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ụ:

• float: left; – Sử dụng float để đặt các phần tử khối trượt cạnh nhau
• display: block; – Cho phép chúng ta xác định padding (và height, width, margins, … nếu bạn muốn)
• padding: 8px; – 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ố padding để làm cho chúng trông đẹp mắt hơn.
• background-color: #dddddd; – Thêm nền màu xám vào mỗi phần tử

Mẹo: Thêm màu nền vào <ul> thay vì mỗi phần tử <a> 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 class “active” vào đường dẫn hiện tại để người dùng biết họ đang xem trên 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 tay phải (float:right;):

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

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

Thêm thuộc tính border-right vào <li> để 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:

Fixed Top

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

Fixed Bottom

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

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 mỏng màu xám:

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

li a {
  color: #666;
}

Sticky Navbar

Thêm position: sticky; vào <ul> để tạo đ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 một vị trí bù nhất định được đáp ứng trong khung nhìn – sau đó nó “dính” vào vị trí (như vị trí: fixed).

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

Các ví dụ khác:

Responsive Topnav

Cách sử dụng CSS media để tạo điều hướng top navigation hiển thị trên nhiều thiết bị có kích thước màn hình khác nhau khi xem website.

Responsive Sidenav

Cách sử dụng CSS media để tạo điều hướng side navigation hiển thị trên nhiều thiết bị có kích thước màn hình khác nhau khi xem website.

Dropdown Navbar

Bạn có thể thêm menu thả xuống bên trong thanh điều hướng: