Tutoriel sur la mise en œuvre d'un menu coulissant réactif à l'aide de CSS

Tutoriel sur l'utilisation de CSS pour implémenter un menu coulissant réactif, des exemples de code spécifiques sont requis

Dans la conception Web moderne, la conception réactive est devenue une compétence essentielle. Pour s'adapter à différents appareils et tailles d'écran, nous devons ajouter un menu réactif au site Web. Aujourd'hui, nous utiliserons CSS pour implémenter un menu coulissant réactif et vous fournirons des exemples de code spécifiques.

Tout d’abord, jetons un coup d’œil à la mise en œuvre. Nous allons créer une barre de navigation qui se réduit automatiquement lorsque la largeur de l'écran est inférieure à un certain seuil et s'agrandit en cliquant sur le bouton de menu. Cela permettra aux utilisateurs de naviguer facilement sur notre site Web sur de petits écrans.

Structure HTML :

<nav class="menu">
  <input class="menu__toggle" type="checkbox">
  <ul class="menu__items">
    <li class="menu__item"><a href="#">首页</a></li>
    <li class="menu__item"><a href="#">关于我们</a></li>
    <li class="menu__item"><a href="#">产品</a></li>
    <li class="menu__item"><a href="#">联系我们</a></li>
  </ul>
  <label class="menu__button" for="menu-toggle"></label>
</nav>

Style CSS :

.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  padding: 10px;
}

.menu__toggle {
  display: none;
}

.menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu__item {
  margin-right: 10px;
}

.menu__item:last-child {
  margin-right: 0;
}

.menu__item a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.menu__button {
  width: 30px;
  height: 30px;
  background-color: #333;
  position: relative;
  cursor: pointer;
  display: none;
}

.menu__button::after,
.menu__button::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -10px;
}

.menu__button::before {
  transform: translateY(-6px);
}

.menu__button::after {
  transform: translateY(6px);
}

Dans le code ci-dessus, nous utilisons quelques propriétés CSS et sélecteurs de base pour implémenter un menu coulissant réactif. Analysons ces codes un par un.

Tout d'abord, nous ajoutons un conteneur avec le nom de classe menu pour la barre de navigation. Ce conteneur est utilisé pour envelopper l'intégralité de la barre de navigation et définir certains styles de base, tels que la couleur d'arrière-plan et le remplissage. menu的容器。这个容器用于包裹整个导航栏，并设置了一些基本的样式，比如背景颜色和内边距。

其次，我们添加了一个用于控制菜单展开与折叠的复选框。这个复选框默认是隐藏的，当我们点击菜单按钮时，它会被选中，从而使菜单项显示出来。

然后，我们为菜单项添加了一个无序列表，并设置了样式。我们使用flex

Deuxièmement, nous avons ajouté une case à cocher pour contrôler l'expansion et la réduction du menu. Cette case à cocher est masquée par défaut et lorsque nous cliquons sur le bouton de menu, elle sera sélectionnée, provoquant l'affichage de l'élément de menu.

Ensuite, nous avons ajouté une liste non ordonnée d'éléments de menu et l'avons stylisée. Nous utilisons la disposition flex pour organiser les éléments de menu horizontalement et définir certains espacements et styles.

Enfin, nous avons stylisé le bouton de menu. Ici, nous utilisons un pseudo-élément pour styliser le bouton et utilisons un positionnement absolu pour placer le pseudo-élément au centre du bouton. Après avoir cliqué sur le bouton, les éléments du menu se développeront. 🎜🎜Ce qui précède est un tutoriel simple sur l'utilisation de CSS pour implémenter un menu coulissant réactif. En appliquant les propriétés et les sélecteurs CSS de manière flexible, nous pouvons facilement créer un menu réactif qui s'adapte aux différentes tailles d'écran. J'espère que ce tutoriel vous sera utile ! 🎜

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!