Paramètres de la barre de navigation CSS

En tant que développeur Web, nous devons souvent concevoir une barre de navigation de page belle et pratique. En HTML, vous pouvez utiliser les balises <ul></ul> et <li> pour créer une barre de navigation de base, mais si vous souhaitez ajouter du style et des effets interactifs, nous Cela doit être fait en utilisant CSS. <ul></ul>和<li>标签来创建一个基本的导航条，但是如果想要增加一些样式和交互效果，我们需要使用CSS来完成。

本文将介绍如何使用CSS来设计导航条，从简单的样式到复杂的效果，逐步详解。

Paramètres de la barre de navigation CSS

首先，我们来创建一个简单的导航条。在HTML代码中，我们使用<ul></ul>和<li>

Cet article présentera comment utiliser CSS pour concevoir des barres de navigation, des styles simples aux effets complexes, étape par étape.

Basic Style

Tout d'abord, créons une barre de navigation simple. Dans le code HTML, nous utilisons les balises <ul></ul> et <li> pour créer une liste non ordonnée, puis utilisons CSS pour définir le style, la taille et la couleur de la liste. , etc. Attributs, comme suit :

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

rrree

Grâce aux paramètres de style ci-dessus, nous avons une barre de navigation simple, comme indiqué ci-dessous :

#🎜🎜 #

Effet de survol

Ensuite, nous pouvons ajouter un effet de survol simple et pratique, de sorte que lorsque le pointeur de la souris survole la barre de navigation, la couleur d'arrière-plan et le texte peuvent être modifiés. d'autres attributs pour améliorer l'effet visuel de l'utilisateur. Nous pouvons y parvenir en définissant la pseudo-classe :hover, comme suit :

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.nav li {
  margin: 0;
}

.nav a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

Le code ci-dessus signifie que lorsque l'utilisateur passe le pointeur de la souris sur le lien de navigation, la couleur d'arrière-plan du lien changera au #555, et le texte deviendra blanc. L'effet terminé est le suivant :

Effet de soulignement

Le prochain effet à obtenir est lorsque l'utilisateur survole le barre de navigation Lorsque le lien est actif, un effet de soulignement apparaît sous le lien. Il s'agit d'un effet relativement courant, qui permet aux utilisateurs de savoir plus clairement quel lien de navigation ils sélectionnent actuellement.

On peut le faire en ajoutant un pseudo élément : avant en dessous du lien. Lorsque l'utilisateur survole le lien, le pseudo-élément s'affichera et augmentera la longueur de la bordure inférieure. Le code est le suivant :

.nav a:hover {
  background-color: #555;
  color: #fff;
}

Le code ci-dessus signifie que lorsque le pointeur de la souris survole le lien de navigation, le pseudo-élément sera affiché et les effets d'animation de translation, de rotation et de mise à l'échelle de l'élément sera défini via l'attribut transform. L'effet terminé est le suivant :

Effet coulissant

Le prochain effet à obtenir est lorsque l'utilisateur sélectionne la navigation lien, Un effet d’indicateur coulissant apparaît sous la barre de navigation. Cet effet peut permettre aux utilisateurs de savoir plus clairement où se trouve le lien de navigation qu'ils choisissent.

Nous pouvons le faire en créant un conteneur d'indicateur et un élément enfant indicateur. Lorsque l'utilisateur sélectionne un lien de navigation, l'indicateur glisse d'une position à une autre. Le code est le suivant :

.nav a:hover:before {
  content:'';
  display: block;
  border-bottom: 4px solid #fff;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.nav a:hover:before {
  transform: scaleX(1);
}

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

Le code ci-dessus signifie que lorsque l'utilisateur sélectionne un lien de navigation, l'indicateur correspondant glissera sous le lien. En définissant la largeur et le décalage de réponse des indicateurs correspondant aux différents liens, nous pouvons obtenir différents effets de glissement. L'effet final est le suivant :

#🎜🎜#Summary#🎜🎜##🎜🎜#Cet article explique comment utiliser CSS pour créer différents types de barres de navigation. , y compris les styles de base, les effets de survol, les effets de soulignement, les effets de glissement, etc. Ces effets peuvent améliorer l'expérience interactive de l'utilisateur et rendre la page plus belle et plus facile à utiliser. Grâce à un apprentissage et une pratique continus, nous pouvons continuellement améliorer et améliorer la conception et l'effet de la page pour offrir une meilleure expérience aux utilisateurs. #🎜🎜#

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!