Navigation Mobile-First

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 8 sur 35.

La navigation conçue d’abord pour les mobiles consiste à commencer par un menu simple et adapté aux écrans tactiles de petite taille, puis à l’améliorer pour les écrans plus grands.

Commencez par une structure de navigation mobile de base : à l’intérieur de l’élément <nav>, incluez un bouton et une liste.

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

Appliquez d’abord les styles mobiles. Sur les petits écrans → affichez un bouton « menu » et masquez la liste.

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

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

Utilisez ensuite les requêtes média pour les écrans plus grands. Sur les écrans plus grands → affichez le menu sous forme de liste horizontale en haut et masquez un bouton « menu ».

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

Cette approche garantit que la navigation est optimisée d'abord pour les appareils mobiles, puis améliorée pour les écrans plus grands.

Défi

Facile

Étant donné un fichier HTML contenant une navigation avec un bouton de menu et une liste, la liste est actuellement toujours visible.

Votre tâche consiste à corriger le style de navigation mobile-first en :

Rendant la liste de navigation masquée par défaut sur les écrans mobiles.
Rendant la liste de navigation visible sur les écrans plus grands (display: flex).

Essayez vous-même

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