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

<li class="menu-item">首页</li>
<li class="menu-item">关于我们</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

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

<li class="menu-item">首页</li>
<li class="menu-item dropdown">
  关于我们
  <ul class="dropdown-menu">
    <li class="dropdown-menu-item">公司简介</li>
    <li class="dropdown-menu-item">团队</li>
    <li class="dropdown-menu-item">历史</li>
  </ul>
</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

ul>

Ensuite, nous devons ajouter des styles au menu déroulant :

.dropdown {
position : relative;
}

.dropdown-menu {
affichage : aucun ;
position : absolue ;
top : 100 %;
background-color : #f2f2f2;
padding : 10px;
}

.dropdown:hover .dropdown-menu {
display: block;
}

Dans cet exemple , nous utilisons le positionnement relatif. Positionnez le menu déroulant par rapport à l'élément de menu parent. Le menu déroulant est conçu pour être positionné de manière absolue, avec une largeur de 100 % et une couleur d'arrière-plan de #f2f2f2. Un menu déroulant apparaîtra lorsque la souris survolera l'élément de menu parent.

Résumé : 
Grâce aux étapes ci-dessus, nous avons implémenté avec succès un menu de navigation purement réactif CSS. À l'aide de requêtes multimédias et de styles CSS de base, nous pouvons facilement créer des menus de navigation qui s'adaptent à différentes tailles d'écran. Cette méthode est non seulement simple et facile à utiliser, mais offre également une bonne expérience utilisateur. Vous pouvez ajuster davantage le style et la mise en page en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!