CSS Navigation bar – Cách tạo Menu trong CSS

Posted by Lập Trình Viên CSS 8 phút đọc

Trang web hiện đại thường có nhiều trang con và các nguồn thông tin khác nhau. Vì vậy, việc thiết kế giao diện hướng dẫn người dùng điều hướng và tìm kiếm thông tin là rất quan trọng. Một phần không thể thiếu trong giao diện của một trang web chính là thanh điều hướng. CSS Navigation bar (thanh điều hướng CSS) là một thành phần quan trọng trong giao diện người dùng trang web, giúp cho người dùng dễ dàng truy cập thông tin và các trang con.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Navigation bar là gì ?

CSS Navigation bar là một phần của GUI (Graphical User Interface – Giao diện người dùng đồ họa) cho phép người dùng truy cập thông tin trên trang web. Đây là một thành phần trực quan trên trang web bao gồm các liên kết để truy cập các trang con của trang web. Thanh điều hướng thường được hiển thị ở trên cùng của trang web dưới dạng danh sách liên kết ngang. Nó cũng có thể được đặt dưới logo hoặc tiêu đề, nhưng luôn phải đặt trước nội dung chính của trang web.

Thanh điều hướng rất quan trọng cho trang web, bởi nó cho phép người dùng dễ dàng di chuyển giữa các trang con khác nhau mà không cần phải tìm kiếm rườm rà. Điều này giúp cho trang web trông chuyên nghiệp và tăng thời gian giữ chân người dùng.

CSS Navigation bar được sử dụng bởi các lập trình viên web để thiết kế trang web. Thanh điều hướng có thể được sử dụng cho bất kỳ loại trang web nào, từ trang web đơn giản cho đến các trang web phức tạp với hàng trăm trang con và các nguồn thông tin khác nhau.

CSS Navigation bar (thanh điều hướng CSS) là thành phần của GUI (Graphical User Interface – Giao diện người dùng đồ họa) cho phép người dùng truy cập thông tin trên trang web.

Hướng dẫn CSS Navigation bar

Có nhiều cách để tạo thanh điều hướng CSS, trong đó phổ biến nhất là thanh điều hướng ngang và thanh điều hướng dọc.

Thanh điều hướng ngang

Thanh điều hướng ngang là danh sách liên kết ngang được đặt ở trên cùng của trang web. Sau đây là một ví dụ về cách tạo thanh điều hướng ngang bằng CSS.

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: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: # 111;
}

Trong ví dụ này, chúng ta sử dụng thuộc tính float để đưa các phần tử trong danh sách liên kết ngang cạnh nhau. Đồng thời, chúng ta cũng sử dụng thuộc tính background-color để chỉ định m àu sắc cho thanh điều hướng. Khi người dùng di chuột vào các liên kết, màu nền sẽ thay đổi để tạo hiệu ứng trực quan.

Thanh điều hướng dọc

Ngoài thanh điều hướng ngang, chúng ta cũng có thể sử dụng thanh điều hướng dọc. Thanh điều hướng dọc được đặt bên trái hoặc bên phải của trang web và thường chứa các liên kết đến các trang con. Sau đây là một ví dụ về cách tạo thanh điều hướng dọc bằng CSS.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: # f1f1f1;
}

li a {
  display: block;
  color: # 000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: # 555;
  color: white;
}

Trong ví dụ này, chúng ta sử dụng thuộc tính width để chỉ định chiều rộng của thanh điều hướng dọc. Các liên kết trong danh sách sẽ được đặt dọc theo cột bằng cách sử dụng thuộc tính display: block. Khi người dùng di chuột vào các liên kết, màu nền sẽ thay đổi để tạo hiệu ứng trực quan.

Ví dụ thực tế:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  position: sticky;
  width:100%;
  top:0;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: lightgray;
}

li {
  float: left;
    border-right: 1px solid blue;
}

li a {
  display: block;
  color: blue;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>
<h1> Example of sticky navigation bar</h1>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the sticky navigation bar</h2>

</body>
</html>

Ưu và Nhược điểm CSS Navigation bar

Ưu điểm

  • Tạo ra giao diện người dùng thân thiện và dễ sử dụng.
  • Giúp người dùng tìm kiếm thông tin nhanh chóng.
  • Tăng thời gian giữ chân người dùng trên trang web.
  • Thanh điều hướng có thể được tùy chỉnh để phù hợp với các yêu cầu của trang web.

Nhược điểm

  • Thiết kế không tốt có thể làm cho thanh điều hướng trở nên rắc rối và khó sử dụng.
  • Nếu không thiết kế tốt, thanh điều hướng có thể làm giảm trải nghiệm người dùng trên trang web.
  • Các lỗi cú pháp hoặc sai sót trong mã CSS có thể khiến thanh điều hướng không hoạt động đúng cách.

Lời khuyên CSS Navigation bar

Để tạo ra một thanh điều hướng hiệu quả, bạn nên tuân thủ các nguyên tắc sau:

  • Tạo ra một thiết kế đơn giản và dễ sử dụng.
  • Sử dụng các ký tự đặc biệt cho các liên kết để dễ dàng phân biệt.
  • Sắp xếp các liên kết theo ngữ cảnh và thứ tự quan trọng để giúp người dùng tìm kiếm thông tin nhanh chóng.
  • Tạo ra một thanh điều hướng có thể được tùy chỉnh để phù hợp với các yêu cầu của trang web.
  • Kiểm tra mã CSS để đảm bảo rằng thanh điều hướng hoạt động đúng cách.