30. Navigation Bar Trong CSS

Một navigation bar (thường gọi là navbar) trong CSS là một phần của giao diện người dùng thường xuất hiện ở phía trên của trang web và chứa các liên kết đến các trang hoặc phần khác của trang web. Navbars thường chứa các mục như menu dropdown, liên kết đăng nhập/đăng ký, biểu tượng tìm kiếm và nhiều chức năng khác.

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

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Navigation Bar Example</title>
</head>
<body>
  <nav class="navbar">
    <ul class="nav-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

CSS (styles.css):

css

.navbar {
  background-color: #333;
  padding: 10px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-list li {
  margin-right: 20px;
}

.nav-list li:last-child {
  margin-right: 0;
}

.nav-list a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

.nav-list a:hover {
  color: #f2f2f2;
}

Trong ví dụ này, chúng ta tạo một navigation bar có các liên kết menu bằng cách sử dụng HTML và CSS:

.navbar là container chứa toàn bộ navigation bar.
.nav-list là danh sách chứa các mục menu.
.nav-list li định dạng các mục menu và tạo khoảng cách giữa chúng.
.nav-list a định dạng các liên kết và áp dụng hiệu ứng hover khi di chuột qua.

Trong thực tế, navbars thường được tùy chỉnh phức tạp hơn bằng cách sử dụng CSS, JavaScript và thậm chí framework như Bootstrap để tạo ra các chức năng tùy chỉnh và linh hoạt hơn.

Leave a Comment Cancel Reply