CSS - Menu déroulants : Un guide pour les débutants
Salut là, futurs concepteurs web ! Aujourd'hui, nous allons plonger dans le merveilleux monde des menu déroulants CSS. En tant que votre gentil voisin prof d'informatique, je suis excité de vous guider dans ce voyage. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et c'est parti !
Qu'est-ce qu'un menu déroulant CSS ?
Avant de sauter dans le code, comprenons ce qu'est un menu déroulant. Imaginez que vous êtes dans un restaurant chic, et que le serveur vous tend une carte. Mais ce n'est pas n'importe quelle carte - c'est une carte magique ! Quand vous appuyez sur "Entrées", une liste de délicieuses starters apparaît. C'est essentiellement ce que fait un menu déroulant sur un site web. C'est un menu qui, lorsqu'il est interagi, révèle plus d'options.
Maintenant, voyons comment nous pouvons créer cette magie avec CSS !
Menu déroulant CSS - Exemple de base
Commençons par un menu déroulant simple. Voici le code HTML et CSS :
<div class="dropdown">
<button class="dropbtn">Menu déroulant</button>
<div class="dropdown-content">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</div>
</div>.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}Reprenons cela :
- Nous créons un conteneur (
<div class="dropdown">) pour notre menu déroulant entier. - À l'intérieur, nous avons un bouton (
<button class="dropbtn">) qui déclenche le menu déroulant. - Le contenu réel du menu déroulant est dans un autre div (
<div class="dropdown-content">). - Nous utilisons CSS pour cacher le contenu du menu déroulant par défaut (
display: none;). - Lorsque nous survolons le conteneur du menu déroulant, nous affichons le contenu (
display: block;).
Menu déroulant CSS - Effet de survol
Maintenant que nous avons notre menu déroulant de base, rendons-le un peu plus chic avec un effet de survol :
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}Ce CSS changera la couleur du bouton lorsque vous le survolez. C'est comme si le bouton disait, "Hey, je suis prêt à vous montrer plus d'options !"
Menu déroulant CSS - Effet au clic
Parfois, nous voulons que notre menu déroulant apparaisse lors d'un clic, et non pas seulement lors d'un survol. Voici comment nous pouvons le faire avec un peu de JavaScript :
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu déroulant</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</div>
</div>function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.show {display:block;}Ce script bascule une classe 'show' en fonction du clic sur le bouton, et ferme le menu déroulant si vous cliquez n'importe où ailleurs sur la page.
Menu déroulant CSS - Menu aligné à droite
Et si nous voulions que notre menu déroulant s'aligne à droite au lieu de gauche ? Très simple !
.dropdown-content {
right: 0;
}Ajoutez simplement cela à votre CSS existant. C'est comme dire à votre menu déroulant, "Décale-toi à droite, s'il te plaît !"
Menu déroulant CSS - Menu aligné à gauche
Pour être complet, voici comment aligner explicitement votre menu à gauche (bien que cela soit généralement la valeur par défaut) :
.dropdown-content {
left: 0;
}Menu déroulant CSS - Avec une image
Rendons notre menu déroulant encore plus excitant en ajoutant une image :
<div class="dropdown">
<button class="dropbtn">Menu déroulant</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
</div>
</div>.dropdown-content img {
margin: 10px 0;
}Maintenant, votre menu déroulant a une belle image en haut. C'est comme ajouter une cerise sur le sundae de votre CSS !
Menu déroulant CSS - Avec une barre de navigation
Enfin, voyons comment intégrer notre menu déroulant dans une barre de navigation :
<ul class="navbar">
<li><a href="#">Accueil</a></li>
<li><a href="#">Nouvelles</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Menu déroulant</a>
<div class="dropdown-content">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
<a href="#">Lien 3</a>
</div>
</li>
</ul>.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.navbar .dropdown {
display: inline-block;
}Et voilà ! Une barre de navigation avec un menu déroulant fonctionnel.
Conclusion
Félicitations ! Vous venez d'apprendre à créer différents types de menus déroulants CSS. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces exemples. Changez les couleurs, ajoutez des animations, ou même essayez de combiner différents types de menus déroulants sur une seule page.
Voici un tableau de référence rapide des méthodes que nous avons couvertes :
| Méthode | Description |
|---|---|
| Menu déroulant de base | Menu déroulant simple qui apparaît lors du survol |
| Effet de survol | Menu déroulant avec changement de couleur lors du survol |
| Menu déroulant au clic | Menu déroulant qui apparaît lors d'un clic |
| Menu aligné à droite | Menu déroulant qui s'aligne à droite |
| Menu aligné à gauche | Menu déroulant qui s'aligne à gauche (par défaut) |
| Avec une image | Menu déroulant qui inclut une image |
| Avec une barre de navigation | Menu déroulant intégré dans une barre de navigation |
Souvenez-vous, dans le monde du design web, la créativité est votre meilleur ami. Alors, à vous de jouer et créez des menus déroulants incroyables ! Qui sait, peut-être inventerez-vous la prochaine grande chose en navigation web. Bon codage !
Credits: Image by storyset