Step Navigation CSS : Rendre la navigation Web plus concise et claire

À l’ère d’Internet d’aujourd’hui, la navigation dans les pages est devenue un élément indispensable de la conception Web. La navigation par étapes est une méthode de navigation qui divise le contenu de la page en plusieurs étapes et fournit aux utilisateurs des conseils clairs. Cela permet non seulement aux utilisateurs de mieux comprendre la structure de la page, mais améliore également la fluidité des opérations de l'utilisateur et réduit les difficultés d'utilisation des utilisateurs. Dans cet article, nous discuterons de l'implémentation frontale de la navigation par étapes - la navigation par étapes basée sur CSS.

1. Contexte

La navigation par étapes est une méthode de navigation qui divise le contenu de la page en plusieurs étapes et fournit des conseils clairs aux utilisateurs. Cette méthode de navigation est souvent utilisée pour guider les utilisateurs à travers une série d'opérations complexes. Scénarios qui apparaissent souvent dans les applications Internet, tels que le processus d'inscription, le processus de commande, le processus de paiement, etc.

Informez clairement les utilisateurs à quelle étape ils se trouvent actuellement et quelle est la prochaine étape, qui est la fonction la plus importante de la navigation par étapes. Si les utilisateurs reconnaissent clairement à quelle étape du processus ils se trouvent, ils comprendront mieux ce que fait cette étape et comment elle est liée aux autres étapes, et pourront le confirmer avant de passer à l’étape suivante.

Pour atteindre cet objectif, les développeurs affichent généralement la navigation par étapes dans l'en-tête ou la barre latérale de la page. Et fournissez un bouton sélectionnable pour chaque étape pour indiquer à l'utilisateur que l'étape est en cours ou est terminée.

2. Implémentation frontale - Navigation par étapes basée sur CSS

En CSS, ce style peut être utilisé pour implémenter une navigation par étapes complète. Dans cette section, nous apprendrons comment utiliser HTML et CSS pour créer une navigation par étapes basée sur CSS.

1. HTML

Lors de la création de code HTML, vous pouvez adopter la structure de base suivante :

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

Dans cet extrait de code, nous avons créé une navigation par étapes enveloppée dans une balise ul. En li, chaque étape est affichée avec un nom appelé « étape x ». Parmi eux, x représente le nombre de pas. Nous avons également créé un div appelé "step" avec un span imbriqué à l'intérieur pour contenir le nom de l'étape.

2. CSS

En CSS, vous pouvez utiliser les styles suivants pour créer une belle navigation par étapes.

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

Le code ci-dessus contient de nombreux styles, chacun avec un objectif spécifique. Cela fait partie de la compréhension de la navigation par étapes CSS.

3. Explication du style

Ici, nous expliquons les styles un par un.

.steps-navigation {
  margin: 0;
  padding: 0;
}

La fonction de cette partie est de définir les marges et le remplissage de la navigation par étapes.

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

La fonction de cette partie est de définir la compatibilité entre la navigation par étapes et l'élément ul externe.

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

La fonction de cette partie est de définir l'élément li contenu dans chaque étape. Il utilise le style display:table-cell pour faire de l'élément li un élément en ligne.

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

La fonction de cette partie est de définir les éléments "step x" et "span" dans chaque étape. Il utilise de nombreux styles pour définir ses propriétés, notamment la largeur, la hauteur, la bordure, l'arrière-plan des éléments, etc.

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

La fonction de cette partie est de définir le style de l'étape sélectionnée. Lorsque l'étape est active (c'est-à-dire l'étape en cours), la couleur d'arrière-plan, la couleur de la police, etc. changeront également.

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

La fonction de cette partie est d'ajouter des lignes de séparation horizontales pour chaque étape.

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

La fonction de cette partie est de modifier la couleur de fond de sa ligne de démarcation horizontale principale lorsque l'étape est active (c'est-à-dire l'étape en cours).

4. Résumé

Dans cet article, nous avons discuté de l'utilisation de CSS pour créer une implémentation frontale de la navigation par étapes. La navigation par étapes est une méthode de navigation couramment utilisée dans les applications Internet. Elle permet aux utilisateurs de mieux comprendre la structure des pages, d'améliorer la fluidité opérationnelle et de réduire les difficultés opérationnelles. En utilisant les technologies ci-dessus, nous pouvons créer une interface utilisateur fluide pour notre site Web ou notre application et améliorer l'expérience utilisateur. Sur la base de la navigation par étapes CSS, nous pouvons étendre davantage l'implémentation, par exemple en utilisant JavaScript pour ajouter une animation ou des effets interactifs. Je pense que ce sera un bon choix pour la conception de votre navigation Web !

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!