Bài 34: Cách sử dụng Navigation Bar trong css

Cách sử dụng Navigation Bar trong css

Navigation bar (hay còn gọi là menu bar) là một thành phần quan trọng trong thiết kế giao diện trang web, được sử dụng để đưa ra các liên kết đến các trang web khác hoặc các phần khác của trang web hiện tại. Để tạo một navigation bar trong CSS, bạn có thể sử dụng các thẻ HTML như ul, li và a, kết hợp với CSS để tạo kiểu cho các phần tử.

Dưới đây là một ví dụ về cách tạo một navigation bar đơn giản bằng CSS:

HTML:

<nav>
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Giới thiệu</a></li>
    <li><a href="#">Dịch vụ</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</nav>

CSS:

nav {
  background-color: #333; /* Màu nền của navigation bar */
}

nav ul {
  list-style-type: none; /* Loại bỏ dấu đầu dòng của các mục */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Loại bỏ phần dư ra nếu có */
}

nav li {
  float: left; /* Hiển thị các mục trên cùng một dòng */
}

nav li a {
  display: block; /* Hiển thị các liên kết dưới dạng khối */
  color: white; /* Màu chữ của các liên kết */
  text-align: center; /* Canh giữa các liên kết */
  padding: 14px 16px; /* Khoảng cách giữa các liên kết */
  text-decoration: none; /* Bỏ gạch chân của các liên kết */
}

nav li a:hover {
  background-color: #111; /* Màu nền của các liên kết khi rê chuột qua */
}

Trong ví dụ này, chúng ta đã sử dụng thuộc tính float để đưa các mục trong navigation bar cùng một dòng và thuộc tính overflow để loại bỏ phần dư ra nếu có. Để tạo các liên kết trong navigation bar, chúng ta đã sử dụng thẻ a và định dạng chúng bằng CSS để tạo kiểu cho các liên kết và các trạng thái khi rê chuột qua các liên kết.