Exemples pour expliquer comment masquer et afficher la barre de menu en utilisant CSS-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-21 13:46:11

original

1866 Les gens l'ont consulté

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.

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;
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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');
});

Copier après la connexion

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，实现菜单栏的展现与隐藏。

通过 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;
}

Copier après la connexion

在菜单栏元素 .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');
});

Copier après la connexion

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

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.

.menu

.active

.menu

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!