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

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

Avec la popularité des appareils mobiles, le design réactif est devenu de plus en plus important, et la barre de navigation est une partie très importante du site web . Cet article explique comment utiliser du CSS pur pour implémenter un effet de sous-menu déroulant dans une barre de navigation réactive, afin que le site Web puisse offrir une bonne expérience utilisateur dans différentes tailles d'écran.

Étape 1 : Structure HTML
Tout d’abord, nous devons créer une structure HTML de base. Les barres de navigation sont généralement créées à l'aide de listes non ordonnées ul et d'éléments de liste li.

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">产品</a>
      <ul class="sub-menu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">联系我们</a>
    </li>
  </ul>
</nav>

Étape 2 : Style CSS
Ensuite, nous devons utiliser CSS pour ajouter des styles, notamment en définissant la couleur d'arrière-plan de la barre de navigation, le style de police et en affichant et masquant les sous-menus.

.navbar {
  background-color: #333;
  height: 60px;
  padding: 0 20px;
}

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  width: 200px;
  padding: 0;
  margin: 0;
}

.nav-item:hover .sub-menu {
  display: block;
}

.sub-menu li {
  padding: 10px;
}

.sub-menu li a {
  color: #fff;
  text-decoration: none;
}

Étape 3 : Responsive Design
Pour nous adapter aux différentes tailles d'écran, nous devons ajouter quelques requêtes multimédias au style CSS. Vous trouverez ci-dessous un exemple simple qui ne couvre qu'un seul cas. Si des styles plus réactifs sont nécessaires, vous pouvez les ajouter en fonction de vos besoins spécifiques.

@media screen and (max-width: 768px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
  
  .nav-link {
    padding: 10px 0;
  }
  
  .sub-menu {
    position: static;
    display: block;
    background-color: transparent;
    width: 100%;
  }
  
  .sub-menu li {
    padding: 10px;
    border-top: 1px solid #fff;
  }
}

Résumé :
Grâce aux étapes ci-dessus, nous pouvons obtenir un simple effet de sous-menu déroulant de barre de navigation réactive. Sur les grands écrans, le sous-menu est affiché via l'état de survol CSS ; sur les petits écrans, le sous-menu sera affiché comme un élément indépendant au niveau du bloc, avec quelques styles supplémentaires ajoutés pour s'adapter aux différentes tailles d'écran.

Il convient de noter qu'il ne s'agit que d'un exemple de base et que davantage de styles et de fonctions peuvent être nécessaires dans les projets réels pour répondre aux besoins. Mais grâce à cet exemple, vous pouvez apprendre à utiliser du CSS pur pour implémenter un effet de sous-menu déroulant dans la barre de navigation réactive, et il peut être étendu et ajusté en fonction de besoins spécifiques.

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!