Navigation Mobile-First

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 8 sur 35.

Navigation mobile-first signifie commencer par un menu simple et adapté au tactile pour les petits écrans, 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 le style mobile. Sur les petits écrans → affichez un bouton « menu » et masquez la liste.

.menu-toggle {
  display: block;
  //quelques styles supplémentaires
}

.nav-list {
  display: none;
  //quelques styles supplémentaires
}

Utilisez ensuite des media queries pour les écrans plus larges. Sur les écrans plus larges → affichez le menu sous forme de liste horizontale en haut et masquez le 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 avec une navigation contenant 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 larges (display: flex).

Aide-mémoire

La navigation mobile-first commence par un menu simple et adapté au tactile pour les petits écrans, puis l'améliore pour les écrans plus grands.

Structure de navigation mobile de base :

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

Style mobile (afficher le bouton, masquer la liste) :

.menu-toggle {
  display: block;
}

.nav-list {
  display: none;
}

Style bureau avec requêtes média (masquer le bouton, afficher la liste horizontale) :

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    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>