Étapes de mise en œuvre pour la mise en œuvre d'un menu de navigation réactif en utilisant du CSS pur

Pure CSS est un moyen rapide de créer des menus de navigation réactifs sans utiliser JavaScript. Dans cet article, nous vous présenterons les étapes détaillées pour mettre en œuvre un menu de navigation réactif, avec des exemples de code concrets.

Étape 1 : Structure HTML
Tout d'abord, nous devons définir la structure HTML du menu de navigation. Voici un exemple simple :

首页
 
关于我们
 
服务
 
联系我们

Étape 2 : Style CSS
Ensuite, nous styliserons le menu de navigation. Voici quelques paramètres de style de base :

.navbar {
background-color: #f2f2f2;
padding: 10px;
}

.menu {
list-style: none;
display: flex;
justifie-content: center ;
}

.menu-item {
margin: 0 10px;
}

Dans cet exemple, nous plaçons le menu de navigation dans une barre de navigation avec une couleur d'arrière-plan et utilisons la disposition CSS Flexbox pour aligner les éléments de menu horizontalement et centre.

Étape 3 : Mise en page réactive
Pour implémenter un menu de navigation réactif, nous devons utiliser des requêtes multimédias. Les requêtes multimédias peuvent changer de style en fonction de la largeur de l'appareil pour s'adapter à différentes tailles d'écran.

@media screen et (max-width : 768px) {
.menu {

flex-direction: column; align-items: center;

}

.menu-item {

margin: 10px 0;

}
}

Dans le code ci-dessus, lorsque la largeur de l'appareil est inférieure ou égal à 768px , nous utilisons des requêtes multimédias pour modifier la disposition du menu de navigation. Nous organisons les éléments de menu verticalement et les alignons au centre.

Étape 4 : Menu déroulant
Parfois, un menu de navigation peut contenir plusieurs éléments de sous-menu. Pour offrir une meilleure expérience utilisateur sur les petits écrans, nous pouvons ajouter une fonctionnalité de menu déroulant.

Tout d'abord, nous devons modifier la structure HTML et ajouter une balise de menu déroulant pour l'élément de sous-menu :