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

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

De nos jours, avec la popularité des appareils mobiles, le design réactif est devenu un facteur important dans la conception Web. Dans la conception de la barre de navigation des pages Web, afin d'offrir une meilleure expérience utilisateur, il est généralement nécessaire d'utiliser des menus déroulants pour présenter davantage d'options de navigation. Cet article présentera comment utiliser du CSS pur pour implémenter l'effet de menu déroulant d'une barre de navigation réactive, avec des exemples de code spécifiques.

<li>Créer une structure HTML
Tout d'abord, nous devons créer une structure HTML de base, comprenant le conteneur de la barre de navigation et le menu de navigation. Dans le menu de navigation, nous utilisons <ul></ul> et <li> pour créer des éléments de menu, tandis que le menu déroulant utilise un <ul> </ul> est imbriqué dans un <li>. <ul></ul>和<li>来创建菜单项，而下拉的菜单则使用一个<ul></ul>嵌套在一个<li>中。

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

<li>设置基本样式
接下来，我们需要为导航栏和菜单项设置一些基本的样式。我们可以使用flexbox来将菜单项水平排列，并使菜单项之间产生间隔。

.navbar {
  background-color: #f8f8f8;
  padding: 10px;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

<li>定义点击下拉菜单的行为
通过CSS伪类:hover

.with-dropdown:hover .dropdown {
  display: block;
}

Définir les styles de base
Ensuite, nous devons définir quelques styles de base pour la barre de navigation et les éléments de menu. Nous pouvons utiliser flexbox pour organiser les éléments de menu horizontalement et créer des espaces entre les éléments de menu. <li>


var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

Définir le comportement de clic sur le menu déroulant
Grâce à la pseudo-classe CSS :hover, nous pouvons obtenir l'effet d'afficher le menu déroulant lorsque la souris survole l'élément de menu. Sur les appareils mobiles, nous pouvons utiliser JavaScript pour ajouter un événement de clic afin de basculer l'affichage et le masquage du menu déroulant.

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

🎜🎜Responsive design🎜Afin de nous adapter à différentes tailles d'écran, nous devons ajuster la disposition de la barre de navigation sous différentes largeurs de fenêtre. Voici un exemple de style pour les appareils mobiles où la largeur de la fenêtre d'affichage est inférieure à 768 pixels, masquant les éléments de menu et utilisant un bouton pour ouvrir ou fermer le menu. 🎜🎜rrreeerrreee🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès l'effet de menu déroulant de la barre de navigation réactive CSS pure. Lorsque la largeur de l'écran est petite, les éléments de menu sont automatiquement masqués et les boutons peuvent être utilisés pour ouvrir ou fermer le menu. Lorsque vous survolez un élément de menu avec un menu déroulant, le menu déroulant apparaît automatiquement. Cette implémentation est simple et efficace, ne repose pas sur JavaScript et convient à divers projets Web. J'espère que cet article vous aidera ! 🎜

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!