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

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

La barre de navigation est un élément courant dans la conception Web, et l'utilisation d'une conception réactive peut permettre à la barre de navigation de s'afficher correctement sur différentes tailles d'écran et opérations. Dans cet article, nous présenterons comment utiliser du CSS pur pour implémenter une barre de navigation réactive avec un effet d'onglet déroulant.

Étape 1 : Préparer la structure HTML
Tout d'abord, nous devons préparer une structure HTML de base. Les barres de navigation sont généralement enveloppées à l'aide d'une liste non ordonnée (<ul></ul>)，每个导航项使用列表项(<li>). Les onglets déroulants nécessitent l'ajout d'une liste non ordonnée imbriquée à l'intérieur de l'élément de liste.

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Étape 2 : Définir le style de base
Afin d'obtenir un effet réactif, nous devons utiliser des requêtes multimédias CSS pour définir le mode d'affichage de la barre de navigation sous différentes tailles d'écran. Dans le même temps, vous devez également définir les styles de base de la barre de navigation et des onglets déroulants.

.navbar {
  background-color: #333;
  height: 50px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  line-height: 50px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  width: 100%;
}

.dropdown li {
  width: 100%;
}

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

Étape 3 : Définir le style réactif
Dans la requête multimédia, nous pouvons définir le mode d'affichage de la barre de navigation en fonction des différentes tailles d'écran. Lorsque la largeur de l'écran est petite, nous pouvons utiliser des barres de défilement horizontales pour afficher les options de navigation. Lorsque la largeur de l'écran est plus grande, nous pouvons utiliser des onglets déroulants pour afficher.

@media screen and (max-width: 768px) {
  .nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-list li {
    white-space: nowrap;
  }
  
  .nav-list li a {
    display: inline-block;
  }
  
  .dropdown {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .nav-list li:hover .dropdown {
    display: block;
  }
}

Grâce aux trois étapes ci-dessus, nous pouvons implémenter une barre de navigation réactive avec un effet d'onglet déroulant. Sur les écrans plus petits, les options de navigation défileront horizontalement, tandis que sur les écrans plus grands, des onglets déroulants apparaîtront en survolant un élément de navigation.

Une telle conception de barre de navigation est non seulement puissante, mais offre également une bonne expérience utilisateur, permettant aux utilisateurs de parcourir et d'utiliser des pages Web de manière pratique sur différents appareils. Grâce à l'utilisation flexible des requêtes multimédias CSS, nous pouvons obtenir des effets dynamiques sur davantage d'éléments dans une conception réactive.

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!