Bài 29: Thanh điều hướng – Navigation Bar trong CSS

Ví dụ về thanh điều hướng nằm dọc và nằm ngang:

Thanh điều hướng – Navigation Bars

Có thanh điều hướng dễ sử dụng là điều quan trọng đối với bất kỳ trang web nào.
Với CSS bạn có thể biến đổi các menu HTML nhàm chán thành thanh điều hướng đẹp mắt.

Thanh điều hướng bằng danh sách các liên kết

Một thanh điều hướng cần HTML tiêu chuẩn làm cơ sở.
Trong các ví dụ dưới đây, chúng ta sẽ xây dựng thanh điều hướng từ một danh sách HTML tiêu chuẩn.
Một thanh điều hướng cơ bản là một danh sách liên kết , vì vậy sử dụng các phần tử <ul> và <li> là hoàn toàn hợp lý:


<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Bây giờ chúng ta sẽ xóa dấu đầu dòng, lề và phần đệm khỏi danh sách:


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Giải thích ví dụ trên:

list-style-type: none; – Xóa điểm đánh dấu. Thanh điều hướng không cần các điểm đánh dấu danh sách
Thiết lập margin: 0; và padding: 0; để xóa cài đặt mặc định của trình duyệt

Code trong ví dụ trên là code tiêu chuẩn được sử dụng trong cả thanh điều hướng dọc và ngang, chúng ta sẽ tìm hiểu thêm trong các bài tiếp theo.