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

Étapes pour mettre en œuvre l'effet de liste déroulante d'une barre de navigation réactive utilisant du CSS pur

À l'ère numérique, les sites Web sont devenus le principal canal permettant aux gens d'obtenir des informations et de communiquer. Pour offrir une meilleure expérience utilisateur, le design réactif devient de plus en plus populaire dans le développement de sites Web. Dans cet article, nous apprendrons comment implémenter un effet de liste déroulante de barre de navigation réactive en utilisant du CSS pur.

Étape 1 : Structure HTML
Tout d'abord, nous devons créer une structure HTML de base pour construire notre barre de navigation. La structure de base est la suivante :

<nav class="navbar">
  <div class="navbar-brand">Logo</div>
  <input type="checkbox" id="toggle" class="toggle-checkbox">
  <label for="toggle" class="toggle-label">
    <span class="toggle-icon"></span>
  </label>
  <ul class="navbar-menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
  </ul>
</nav>

Dans cette structure, nous avons un conteneur de barre de navigation avec la classe navbar, incluant une marque de barre de navigation (navbar-brand), une case à cocher A complexe (toggle-checkbox) et une étiquette (toggle-label) pour basculer la visibilité du menu de la barre de navigation, et un menu de la barre de navigation</ code> >Une liste non ordonnée de classes (<code>ul) utilisée pour afficher les éléments du menu de navigation. navbar类的导航栏容器，包括一个导航栏品牌（navbar-brand），一个复选框（toggle-checkbox）和一个用于切换导航栏菜单可见性的标签（toggle-label），以及一个navbar-menu类的无序列表（ul）用于显示导航菜单项。

步骤二：CSS 样式
接下来，我们将为导航栏创建CSS样式，以使其在不同屏幕尺寸下呈现不同的效果。以下是一个基本的CSS样式，你可以根据自己的需要进行修改：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.navbar-brand {
  font-size: 20px;
}

.toggle-label {
  display: none;
  cursor: pointer;
}

.toggle-icon {
  display: inline-block;
  width: 30px;
  height: 5px;
  background-color: #fff;
  margin-bottom: 5px;
}

.navbar-menu {
  display: flex;
  list-style-type: none;
}

.navbar-menu li {
  margin-left: 10px;
}

@media screen and (max-width: 768px) {
  .navbar-menu {
    display: none;
  }

  .toggle-label {
    display: inline-block;
  }

  .toggle-checkbox:checked ~ .navbar-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 45px;
    background-color: #333;
    width: 100%;
  }

  .toggle-checkbox:checked ~ .navbar-menu li {
    margin-left: 0;
  }
}

在这个CSS样式中，我们设置了导航栏的背景颜色，字体颜色，行距等。我们还隐藏了复选框（.toggle-checkbox）和下拉菜单（.navbar-menu

Ensuite, nous créerons des styles CSS pour la barre de navigation afin de lui donner différents effets sur différentes tailles d'écran. Voici un style CSS de base que vous pouvez modifier selon vos besoins :
rrreee

Étape 3 : Effet terminé

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!