Implémenter un menu de navigation réactif à l'aide de CSS

Utiliser CSS pour implémenter un menu de navigation réactif

Avec la popularité des appareils mobiles, de plus en plus de sites Web doivent s'adapter à différentes tailles d'écran pour offrir une meilleure expérience utilisateur. Sur les appareils mobiles, en raison de l'espace limité sur l'écran, les menus de navigation horizontaux traditionnels peuvent ne pas s'afficher entièrement sur les petits écrans ou obliger les utilisateurs à faire glisser continuellement l'écran pour afficher l'intégralité des éléments de menu. Par conséquent, les menus de navigation réactifs deviennent de plus en plus populaires.

Cet article expliquera comment utiliser CSS pour implémenter un menu de navigation réactif simple et fournira des exemples de code spécifiques.

Tout d’abord, créez une structure de menu de navigation de base dans un fichier HTML. Voici un exemple simple :

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Products</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

Dans le fichier CSS, nous devons ajouter quelques styles pour rendre le menu de navigation réactif.

Tout d'abord, ajoutez un style de base au menu de navigation pour qu'il ressemble à une barre de navigation horizontale :

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

.navbar-brand {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

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

.menu-item {
  margin-left: 10px;
}

.menu-item a {
  color: #fff;
  text-decoration: none;
}

Ensuite, nous devons ajouter un style réactif pour les petites tailles d'écran.

Sur les petits écrans, nous souhaitons que le menu de navigation devienne un menu déroulant vertical. Nous pouvons utiliser des requêtes multimédias CSS pour obtenir cet effet.

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

  .menu-item {
    display: block;
    margin: 10px 0;
  }

  .menu-item a {
    display: block;
    padding: 10px;
    background-color: #333;
  }

  .navbar-toggle {
    display: block;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .navbar-collapse {
    display: none;
    background-color: #333;
    padding: 10px;
  }

  .navbar-collapse.active {
    display: block;
  }
}

Dans le code ci-dessus, @media (max-width: 600px) signifie que ces styles sont appliqués lorsque la largeur de l'écran est inférieure ou égale à 600px. @media (max-width: 600px) 表示当屏幕宽度小于等于 600px 时应用这些样式。

我们将隐藏原始的导航菜单 .navbar-menu，并将每个菜单项 .menu-item 显示为块级元素，并添加一些样式以使其看起来像一个下拉菜单。

另外，我们还添加了一个 .navbar-toggle 元素作为触发菜单的按钮，并创建了一个 .navbar-collapse 元素来容纳下拉菜单。通过给 .navbar-collapse 添加 .active 类，我们可以控制它的显示和隐藏。

最后，在JavaScript中添加一些交互效果。我们将使用简单的事件处理函数来切换 .navbar-collapse 的显示和隐藏。

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
});

现在，当点击 .navbar-toggle 时，我们可以切换 .navbar-collapse

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!