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>

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>

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;
}

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;
}

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>

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!