Điều hướng ưu tiên thiết bị di động

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 8 trên 35.

Điều hướng ưu tiên thiết bị di động nghĩa là bắt đầu với một menu đơn giản, dễ thao tác bằng cảm ứng trên màn hình nhỏ, sau đó cải tiến menu cho màn hình lớn hơn.

Bắt đầu với cấu trúc điều hướng cơ bản trên thiết bị di động: bên trong phần tử <nav>, hãy thêm một nút và một danh sách.

<nav class="main-nav">
  <button class="menu-toggle">Menu</button>
  <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>

Ưu tiên áp dụng kiểu dáng cho thiết bị di động. Trên màn hình nhỏ → hiển thị nút “menu” và ẩn danh sách.

.menu-toggle {
  display: block;
  //some more styles
}

.nav-list {
  display: none;
  //some more styles
}

Sau đó, dùng media query cho màn hình lớn hơn. Trên màn hình lớn hơn → hiển thị menu dưới dạng danh sách nằm ngang ở phía trên và ẩn nút “menu”.

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    display: flex;
  }
}

Cách tiếp cận này đảm bảo giao diện điều hướng được tối ưu cho thiết bị di động trước, sau đó được cải thiện cho màn hình lớn hơn.

Thử thách

Dễ

Với một tệp HTML có thanh điều hướng gồm nút menu và danh sách, hiện tại danh sách luôn hiển thị.

Nhiệm vụ của bạn là sửa kiểu thanh điều hướng ưu tiên thiết bị di động bằng cách:

Ẩn danh sách điều hướng theo mặc định trên màn hình di động.
Hiển thị danh sách điều hướng trên màn hình lớn hơn (display: flex).

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Navigation</title>
  <style>
    :root {
      --primary-color: #4a6de5;
      --text-color: #333333;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-weight: bold;
      color: var(--primary-color);
      text-decoration: none;
      font-size: 1.5rem;
    }
    
    .menu-toggle {
      display: block;
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    
    .nav-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0 0;
      width: 100%;
    }
  
    .nav-list li a {
      color: var(--text-color);
      text-decoration: none;
      display: block;
      padding: 0.5rem 0;
    }
    
    @media (min-width: 768px) {
      .menu-toggle {
        display: none;
      }
      
      .nav-list {
        margin: 0;
        width: auto;
      }
      
      .nav-list li {
        margin: 0 0 0 1.5rem;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <nav class="nav-container">
      <a href="#" class="logo">MySite</a>
      <button class="menu-toggle">Menu</button>
      <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>
  </header>
</body>
</html>