Le menu qui s'empile

🎯 Objectif

Faire tenir un menu de liens sur un téléphone et sur un écran de bureau. Le module 9 et le module 11 travaillent ensemble.

📖 Exemple

Le sommaire du site de la fanfare suit le plan de la quasi-totalité des menus du web : Flexbox range, la media query décide quand :

<nav class="sommaire">
    <ul>
        <li><a href="concerts.html">Concerts</a></li>
        <li><a href="repetitions.html">Répétitions</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

.sommaire ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 12px;
    background-color: #f5f5f4;
}

.sommaire a {
    display: block;
    padding: 14px;
    background-color: #eab308;
    color: #1e293b;
    text-decoration: none;
    text-align: center;
}

@media (min-width: 640px) {
    .sommaire ul {
        flex-direction: row;
        justify-content: flex-end;
    }
}

La fenêtre te montre l'état téléphone : trois liens empilés, chacun sur toute la largeur. Pourquoi ce découpage ? Le conteneur reste flexible dans les deux états ; seul le sens de l'axe principal change, et c'est la media query qui décide quand. Tout ce qui est vrai à toutes les tailles — le mode flexible, la gouttière, les couleurs, le padding — reste dans la base : le bloc conditionnel ne contient que les deux déclarations qui changent, le sens de l'axe et la répartition dessus (ici, les liens partent à droite). Souviens-toi de l'exercice 7.5 : justify-content agit sur l'axe principal, il n'est donc utile qu'une fois l'axe redevenu horizontal.

♿ Ces liens empilés sont aussi de bonnes cibles tactiles : 14 pixels d'air au-dessus et en dessous du texte, la hauteur dépasse les 44 pixels recommandés pour viser au pouce — et la gouttière empêche le doigt de déraper sur le voisin. Une barre comprimée sur téléphone, à l'inverse, c'est des cibles minuscules collées les unes aux autres.

📝 Consigne

Le menu du club photo est en rangée, comme au module 9. Sur l'aperçu — large comme un téléphone — les quatre liens se compriment jusqu'à déborder de la barre : le dernier finit coupé par le bord. On empile, en mobile d'abord. Dans l'onglet CSS :

1. dans la règle .menu ul { }, ajoute la déclaration qui fait descendre l'axe principal en colonne (flex-direction)
2. tout en bas, ouvre un bloc conditionnel à partir de 768 pixels
3. à l'intérieur, une règle .menu ul avec deux déclarations : l'axe remis en rangée, puis les liens groupés au centre (justify-content)

Ne touche pas au reste : la gouttière et le mode flexible ne dépendent pas de la taille de l'écran.