Étapes pour implémenter l'effet flottant de la barre de navigation réactive en utilisant du CSS pur

Étapes pour implémenter l'effet flottant d'une barre de navigation réactive en utilisant du CSS pur

Avant-propos :
Avec le développement rapide de l'Internet mobile, le design réactif est devenu une caractéristique importante de la conception Web. En responsive design, la barre de navigation est un élément clé. Cet article expliquera comment obtenir l'effet flottant d'une barre de navigation réactive via du CSS pur, afin que la barre de navigation puisse s'adapter automatiquement à différents appareils et avoir un effet flottant.

Étape 1 : Structure HTML

Tout d'abord, nous devons préparer une structure HTML de base, qui comprend les éléments de la barre de navigation. Voici un exemple de structure de barre de navigation de base :

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Étape 2 : Styles CSS de base

Ensuite, nous devons ajouter quelques styles CSS de base à la barre de navigation et définir l'effet flottant de la barre de navigation. Ce qui suit est un exemple de style CSS de base :

nav {
  background-color: #f0f0f0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ccc;
}

Avec le style CSS ci-dessus, nous définissons la couleur d'arrière-plan, le style de police, etc. de la barre de navigation et ajoutons un effet flottant à la barre de navigation.

Étape 3 : Conception réactive

Afin d'obtenir une conception réactive, nous devons utiliser des requêtes multimédias (Media Queries) pour définir le mode d'affichage de la barre de navigation sous différentes tailles d'écran. Voici un exemple de requête multimédia de base :

@media screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  nav ul li {
    display: block;
  }
}

Avec la requête multimédia ci-dessus, lorsque la largeur de l'écran est inférieure à 768 px, la liste de la barre de navigation sera masquée et chaque élément de navigation sera affiché sous la forme d'une liste verticale indépendante.

Étape 4 : Effet de survol

Afin d'obtenir l'effet de survol, nous pouvons utiliser la pseudo-classe CSS :hover pour y parvenir. Voici un exemple de style CSS pour un effet de survol :

nav ul li:hover {
  background-color: #ccc;
}

nav ul li:hover a {
  color: #fff;
}

Avec le style CSS ci-dessus, lorsque la souris survole chaque élément de navigation dans la barre de navigation, la couleur d'arrière-plan deviendra #ccc et la couleur du texte changera. au blanc.

En résumé, grâce aux étapes ci-dessus, nous avons réussi à obtenir l'effet flottant d'une barre de navigation purement réactive CSS. Avec cette approche, nous pouvons facilement adapter la barre de navigation à différents appareils et offrir aux utilisateurs une meilleure expérience utilisateur.

J'espère que cet article vous sera utile, merci d'avoir lu !

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!