BÀI 7: LIÊN KẾT VÀ ĐIỀU HƯỚNG (NAVIGATION)

7.3. Tạo Menu điều hướng (Navigation Bar)

Menu thực chất là một danh sách (<ul>) nhưng được CSS để nằm ngang và bỏ dấu chấm đầu dòng.

• Bước 1: HTML

  HTML

   

  <nav>
      <ul class="menu">
          <li><a href="index.html">Trang chủ</a></li>
          <li><a href="tin-tuc.html">Tin tức</a></li>
          <li><a href="lien-he.html">Liên hệ</a></li>
      </ul>
  </nav>
  

• Bước 2: CSS (Biến danh sách dọc thành ngang)

  CSS

   

  /* 1. Xóa dấu chấm tròn và căn lề */
  .menu {
      list-style-type: none;
      padding: 0;
      margin: 0;
      background-color: #333; /* Màu nền đen */
      overflow: hidden;
  }
  
  /* 2. Cho các mục nằm ngang hàng */
  .menu li {
      float: left; /* Trôi về bên trái */
  }
  
  /* 3. Trang trí cho thẻ Link bên trong */
  .menu li a {
      display: block;         /* Biến link thành khối để bấm dễ hơn */
      color: white;           /* Chữ trắng */
      text-align: center;
      padding: 14px 16px;     /* Tạo khoảng thở */
      text-decoration: none;  /* Bỏ gạch chân xấu xí */
  }
  
  /* 4. Hiệu ứng khi di chuột */
  .menu li a:hover {
      background-color: #111; /* Đổi màu nền khi hover */
  }