Insérez la balise <nav>
Dans votre fichier HTML, créez un élément de navigation en utilisant la balise <nav> pour encadrer vos liens de navigation.
Pour respecter les normes HTML et optimiser votre référencement naturel, il est nécessaire d'inclure votre menu principal dans une balise nav, dans votre section header.
<nav>
<a href="#">Accueil</a>
<a href="#">À propos</a>
<a href="#">Contact</a>
</nav>
Utilisez les media-queries
Il vous suffit simplement d'ajouter la propriété display et la valeur flex. Ensuite, vous pouvez définir la direction de votre contenu en fonction de la taille de l'écran. Pour cela, c'est simple, utilisez flex-direction.
Pour la partie responsive : En utilisant les media queries, vous pouvez changer la disposition de votre menu en fonction de la taille de l'écran, ce qui vous permet de créer un menu responsive qui s'adapte automatiquement à différentes résolutions.
/* Définissez la disposition initiale de votre menu */
nav {
display: flex;
flex-direction: row;
}
/* Définissez la disposition de votre menu lorsque la résolution de l'écran est inférieure à 600 pixels de large */
@media (max-width: 600px) {
nav {
flex-direction: column;
}
}
Besoin d'intégrer ce menu ?
Copiez simplement ce code et gagnez du temps :
<nav>
<a href="#">Accueil</a>
<a href="#">À propos</a>
<a href="#">Contact</a>
</nav>
/* Définissez la disposition initiale de votre menu */
nav {
display: flex;
flex-direction: row;
}
/* Définissez la disposition de votre menu lorsque la résolution de l'écran est inférieure à 600 pixels de large */
@media (max-width: 600px) {
nav {
flex-direction: column;
}
}
Et voilà ! Pour aller plus loin, il faudrait ajouter un hamburger et ajouter un évènement au clic pour faire apparaitre le menu. C'est ce que nous verrons dans un prochain tutoriel dédié au méga-menu !
