Mobil Öncelikli Navigasyon

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 8 / 35.

Mobil öncelikli navigasyon, küçük ekranlar için basit, dokunmatik dostu bir menü ile başlamak, ardından bunu daha büyük ekranlar için geliştirmek anlamına gelir.

Temel bir mobil navigasyon yapısıyla başlayın: <nav> öğesinin içine bir düğme ve bir liste ekleyin.

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

Önce mobil stillendirmeyi uygulayın. Küçük ekranlarda → bir “menü” düğmesi gösterin ve listeyi gizleyin.

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

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

Ardından daha büyük ekranlar için medya sorgularını kullanın. Daha büyük ekranlarda → menüyü üstte yatay bir liste olarak gösterin ve bir “menü” düğmesini gizleyin.

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

Bu yaklaşım, navigasyonun önce mobil cihazlar için optimize edilmesini, ardından daha büyük ekranlar için geliştirilmesini sağlar.

Görev

Kolay

Bir menü düğmesi ve bir liste içeren navigasyona sahip bir HTML dosyası verildiğinde, şu anda liste her zaman görünür durumdadır.

Göreviniz, mobil öncelikli (mobile-first) navigasyon stilini şu şekilde düzeltmektir:

Mobil ekranlarda navigasyon listesini varsayılan olarak gizli yapmak.
Daha büyük ekranlarda navigasyon listesini görünür yapmak (display: flex).

Kopya kağıdı

Mobil öncelikli navigasyon, küçük ekranlar için basit, dokunmatik dostu bir menü ile başlar ve ardından büyük ekranlar için geliştirilir.

Temel mobil navigasyon yapısı:

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

Mobil stil (butonu göster, listeyi gizle):

.menu-toggle {
  display: block;
}

.nav-list {
  display: none;
}

Medya sorguları ile masaüstü stili (butonu gizle, yatay listeyi göster):

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

Kendin dene

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