Navigasi mobile-first

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 8 dari 35.

Navigasi yang mengutamakan perangkat mobile berarti memulai dengan menu sederhana yang mudah digunakan dengan sentuhan untuk layar kecil, lalu menyempurnakannya untuk layar yang lebih besar.

Mulailah dengan struktur navigasi seluler dasar: di dalam elemen <nav>, sertakan sebuah tombol dan sebuah list.

<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>

Terapkan gaya untuk perangkat seluler terlebih dahulu. Pada layar kecil → tampilkan tombol “menu” dan sembunyikan list.

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

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

Lalu gunakan media queries untuk layar yang lebih besar. Pada layar yang lebih besar → tampilkan menu sebagai daftar horizontal di bagian atas dan sembunyikan tombol “menu”.

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

Pendekatan ini memastikan navigasi dioptimalkan terlebih dahulu untuk perangkat seluler, lalu disempurnakan untuk layar yang lebih besar.

Tantangan

Mudah

Dengan file HTML yang memiliki navigasi berisi tombol menu dan list, saat ini list selalu terlihat.

Tugasmu adalah memperbaiki gaya navigasi mobile-first dengan cara:

Membuat list navigasi tersembunyi secara default pada layar ponsel.
Membuat list navigasi terlihat pada layar yang lebih besar (display: flex).

Coba sendiri

<!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>