menu CSS afficher et masquer

Affichage et masquage des menus CSS

CSS est l'une des compétences essentielles des développeurs front-end Aujourd'hui, nous allons apprendre à utiliser CSS pour afficher et masquer les menus. Dans la conception Web, le menu est un élément très important. Il peut améliorer l’expérience utilisateur, optimiser la mise en page, améliorer la navigation et les fonctions de recherche du site Web, etc.

CSS peut afficher et masquer les menus. La méthode d'implémentation spécifique est la suivante :

1. Utilisez le sélecteur CSS pour sélectionner les éléments qui doivent être masqués : #🎜🎜. #

.menu {
     display: none;
}

#🎜🎜 #Le .menu dans le code ci-dessus signifie sélectionner un élément avec le menu de classe, et display:none signifie masquer cet élément.

2. Ajoutez un style CSS à l'élément où le menu doit être affiché :

#show-menu:hover + .menu {
     display: block;
}

#show-menu dans le code ci-dessus signifie sélectionner un élément avec l'identifiant de show -menu, + : signifie sélectionner l'élément frère suivant, .menu signifie sélectionner l'élément dont la classe est menu. L'élément .menu s'affiche lorsque la souris passe sur #show-menu.

Le code complet est le suivant :

<style>
.menu {
     display: none;
}
#show-menu:hover + .menu {
     display: block;
}
</style>

<div id="show-menu">显示菜单</div>
<ul class="menu">
     <li><a href="#">菜单项1</a></li>
     <li><a href="#">菜单项2</a></li>
     <li><a href="#">菜单项3</a></li>
     <li><a href="#">菜单项4</a></li>
</ul>

Dans le code ci-dessus, lorsque la souris survole "Afficher le menu", le menu s'affichera, et lorsque la souris quittera , le menu disparaîtra.

De plus, CSS fournit également une variété d'autres méthodes pour afficher et masquer les menus, notamment : l'utilisation de la transition en CSS3, l'utilisation de JavaScript, etc. Les développeurs peuvent choisir la méthode à utiliser en fonction des besoins réels.

En étudiant cet article, je pense que vous maîtrisez la méthode d'affichage et de masquage des menus en CSS. Il s'agit d'une compétence très basique pour les développeurs front-end et d'un moyen important d'améliorer l'expérience utilisateur du site 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!