Exemples pour expliquer comment masquer et afficher la barre de menu en utilisant CSS

Dans le développement de sites Web, la barre de menus est souvent une partie importante du site Web, facilitant la navigation et l'utilisation des utilisateurs. Cependant, nous souhaitons parfois masquer la barre de menus dans certaines situations, par exemple pour réduire l'espace de la page lors de l'optimisation pour mobile ou lors de la création d'un site Web réactif, la barre de menus doit être masquée sur les appareils à petit écran, et lorsque le bouton hamburger est cliqué Je viens de le montrer. Dans cet article, nous présenterons quelques techniques CSS de base pour masquer et afficher la barre de menus.

1. Utilisez l'attribut display pour contrôler l'affichage et le masquage de la barre de menu

L'attribut display est un attribut très basique en CSS, utilisé pour contrôler le mode d'affichage des éléments HTML. Cet attribut a plusieurs paramètres, dont plusieurs valeurs communes : block (élément de niveau bloc), inline (élément en ligne), none (non affiché), etc.

Afin de masquer la barre de menu, vous pouvez ajouter le code CSS suivant à la feuille de style :

.menu {
    display: none;
}

De cette façon, au chargement de la page, la barre de menu sera masquée. Si nous voulons afficher la barre de menu lorsque l'on clique sur le bouton hamburger, nous pouvons lier un événement au bouton et l'afficher en modifiant l'attribut display de l'élément de la barre de menu à bloquer lorsqu'on clique dessus. L'exemple de code est le suivant :

Code HTML :

<div class="menu-toggle">
  <button>Toggle Menu</button>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>

Code CSS :

.menu {
  display: none;
}

/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 2em;
    box-sizing: border-box;
    z-index: 9999;
  }
}

/* 汉堡按钮样式 */
.menu-toggle button {
  background-color: #000;
  color: #fff;
  padding: 0.6em;
  border: none;
}

/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
  display: block;
}

Code JavaScript :

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

Comme indiqué ci-dessus, nous utilisons le sélecteur de pseudo-classe :active dans CSS et JavaScript L'attribut classList, ajoutez la classe .active au bouton hamburger lorsque vous cliquez dessus et modifiez l'attribut d'affichage de l'élément de la barre de menu pour qu'il bloque lors du développement du menu afin de réaliser l'affichage et le masquage de la barre de menu. :active 和 JavaScript 中的 classList 属性，在点击汉堡按钮时为其添加 .active 类，展开菜单时修改菜单栏元素的 display 属性为 block，实现菜单栏的展现与隐藏。

2. 通过 CSS 动画控制菜单栏的滑动展现

除了利用 display 属性控制元素的显示和隐藏外，CSS 中还有许多有趣的动画技巧，可以帮助我们实现更为流畅的展现效果。其中，利用 CSS 中的 transition 属性，可以实现一些简单的元素过渡效果。

具体来说，在菜单栏的展现中，可以为菜单栏元素添加过渡效果，将其从隐藏状态转化为展现状态。

添加如下 CSS 代码：

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 2em;
  box-sizing: border-box;
  transition: left 0.3s ease-in-out;
}

/* 展开菜单时加上移动效果 */
.menu.active {
  left: 0;
}

在菜单栏元素 .menu 上设置 position 为 fixed，使其保持固定位置，然后将 left 属性设置为 -100%。这样一来，菜单栏就会被隐藏在页面左侧，位于用户屏幕外。同时，我们为菜单栏元素设置了一个过渡效果：当其 left 属性发生变化时，通过 ease-in-out 的缓动效果进行过渡，以实现更为平滑的展现效果。

当点击汉堡按钮时，我们利用 JavaScript 代码使菜单栏元素的 left 属性从 -100% 变为 0，同时将其对应的类 .active 添加至菜单栏元素上。代码示例如下：

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

在汉堡按钮的点击事件中，我们使用了 JavaScript 中的 classList 属性，通过切换 .active 类，控制菜单栏的展现和隐藏。同时，在 .menu 元素上添加了 .active

Contrôlez l'affichage coulissant de la barre de menu via l'animation CSS

En plus d'utiliser l'attribut display pour contrôler l'affichage et le masquage des éléments, il existe de nombreuses techniques d'animation intéressantes en CSS qui peuvent aidez-nous à obtenir un effet d'affichage plus fluide. Parmi eux, certains effets de transition d'éléments simples peuvent être obtenus en utilisant l'attribut transition en CSS.

🎜Plus précisément, dans l'affichage de la barre de menus, vous pouvez ajouter des effets de transition aux éléments de la barre de menus pour les transformer de l'état masqué à l'état affiché. 🎜🎜Ajoutez le code CSS suivant : 🎜rrreee🎜Définissez la position sur fixe sur l'élément de la barre de menu .menu pour le maintenir dans une position fixe, puis définissez la propriété gauche sur -100 %. De cette façon, la barre de menus est masquée sur le côté gauche de la page, hors de l'écran de l'utilisateur. Dans le même temps, nous définissons un effet de transition pour l'élément de la barre de menu : lorsque son attribut gauche change, la transition est effectuée via l'effet d'accélération d'entrée-sortie pour obtenir un effet d'affichage plus fluide. 🎜🎜Lorsque nous cliquons sur le bouton hamburger, nous utilisons du code JavaScript pour modifier l'attribut gauche de l'élément de la barre de menu de -100% à 0, et en même temps ajouter sa classe correspondante .active au élément de la barre de menus. L'exemple de code est le suivant : 🎜rrreee🎜En cas de clic du bouton hamburger, nous utilisons l'attribut classList en JavaScript pour contrôler l'affichage et le masquage de la barre de menu en changeant la classe .active. En même temps, lorsque la classe .active est ajoutée à l'élément .menu, l'attribut gauche de l'élément de la barre de menu passe de -100 % à 0, créant un effet de transition en douceur grâce au réglage. 🎜🎜Résumé🎜🎜Dans le processus de développement d'un site Web, la méthode de présentation de la barre de menus est une question qui doit souvent être prise en compte. En utilisant diverses techniques de propriétés CSS, vous pouvez réaliser différentes méthodes d'affichage telles que le masquage et l'affichage coulissant de la barre de menus, offrant aux utilisateurs une expérience de fonctionnement plus pratique. J'espère que cet article vous inspirera dans le développement de sites Web et vous aidera à obtenir une meilleure conception 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!