Comment implémenter l'effet de menu déroulant de la barre de navigation via du CSS pur-tutoriel CSS-php.cn

Comment implémenter l'effet de menu déroulant de la barre de navigation via du CSS pur

王林

Libérer： 2023-10-27 12:25:50

original

1362 Les gens l'ont consulté

Comment implémenter leffet de menu déroulant de la barre de navigation via du CSS pur

Comment obtenir l'effet de menu déroulant de la barre de navigation grâce à du CSS pur

Dans la conception Web, la barre de navigation est un composant très courant et le menu déroulant est un effet courant dans la barre de navigation. Dans cet article, nous apprendrons comment implémenter l'effet de menu déroulant de la barre de navigation en utilisant uniquement CSS et fournirons des exemples de code détaillés.

Tout d'abord, nous avons besoin d'une structure de barre de navigation de base, comme indiqué ci-dessous :

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item">首页</li>
    <li class="nav-item">产品</li>
    <li class="nav-item dropdown">
      <a href="#" class="dropdown-btn">服务</a>
      <ul class="dropdown-menu">
        <li><a href="#">服务一</a></li>
        <li><a href="#">服务二</a></li>
        <li><a href="#">服务三</a></li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

Copier après la connexion

Dans cette structure, nous utilisons un élément nav comme conteneur de la barre de navigation, qui contient un Le L'élément ul sert de conteneur pour les éléments de navigation et l'élément li est utilisé dans chaque élément de navigation. Pour l'élément de navigation contenant le menu déroulant, nous ajoutons un nom de classe spécial dropdown et un élément a pour le déclencheur du menu déroulant. nav元素作为导航栏的容器，内部包含一个ul元素作为导航项目的容器，并在每个导航项目中使用li元素。对于包含下拉菜单的导航项目，我们给其添加一个特殊的类名dropdown，以及一个下拉菜单触发器的a元素。

接下来，我们使用CSS来实现下拉菜单的效果，具体代码如下：

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

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

.nav-item {
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
}

.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-menu a {
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #ccc;
}

Copier après la connexion

在这段CSS代码中，我们首先对导航栏的样式进行了设置。接着，我们对下拉菜单的样式进行设置。首先，我们将下拉菜单的display属性设置为none，使其默认不可见。然后，通过.dropdown:hover > .dropdown-menu选择器，当鼠标悬停在包含下拉菜单的导航项目上时，将下拉菜单的display属性设置为block

Ensuite, nous utilisons CSS pour obtenir l'effet du menu déroulant. Le code spécifique est le suivant :

rrreee

Dans ce code CSS, nous définissons d'abord le style de la barre de navigation. Ensuite, nous définissons le style du menu déroulant. Tout d'abord, nous définissons la propriété display du menu déroulant sur none afin qu'elle soit invisible par défaut. Ensuite, via le sélecteur .dropdown:hover > .dropdown-menu, lorsque la souris survole l'élément de navigation contenant le menu déroulant, définissez l'attribut display du menu déroulant. Réglez sur block pour obtenir l'effet d'affichage du menu déroulant.

Enfin, nous avons stylisé les éléments du menu dans le menu déroulant, notamment la couleur d'arrière-plan, l'espacement, la couleur du texte, etc.

Avec le code CSS et la structure HTML ci-dessus, nous avons implémenté une barre de navigation simple et ajouté avec succès un effet de menu déroulant. Vous pouvez effectuer des ajustements de style subtils en fonction de vos besoins, tels que la taille de la police, la couleur d'arrière-plan, etc. 🎜🎜Pour résumer, il n'est pas compliqué de réaliser l'effet de menu déroulant de la barre de navigation via du CSS pur. Cela ne nécessite qu'une simple structure HTML et une petite quantité de code CSS pour le compléter. J'espère que cet article vous sera utile, et si vous avez des questions, n'hésitez pas à les poser. 🎜

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!