Créez un menu déroulant ultra-facilement en CSS !
L’expérience utilisateur et le temps de chargement d’un site sont des facteurs clés de votre réussite. Il est très important pour vous (et vos visiteurs) d’avoir un site web rapide. C’est pourquoi il vous est important de ne pas surcharger votre site avec du Javascript inutile. Mais alors comment faire un joli menu ? Il ne vous sera pas nécessaire d’utiliser JavaScript pour ça. Aujourd’hui, on peut créer un menu déroulant en utilisant seulement HTML et CSS. C’est ce que nous vous apprendrons dans ce tutoriel ! Allons-y 😉
Sommaire
Ce dont vous aurez besoin
Avant de créer un menu déroulant en HTML/CSS, vous aurez besoin des éléments suivants :
- L’accès à votre panneau de contrôle d’hébergement
Étape 1 – Création d’un fichier HTML
Tout d’abord, vous devez créer un fichier HTML vierge. Dans ce tutoriel, nous allons créer un nouveau fichier nommé menu.html . Nous utiliserons le Gestionnaire de fichiers (dans Hostinger) pour cela. Cependant, vous pouvez faire la même chose en utilisant un client FTP (créez le fichier menu.html directement sur votre ordinateur et envoyez le sur votre FTP).
1- Aller sur la page d’hébergement
2- Allez sur la section Gestionnaire de fichier, et puis cliquer sur l’icone + pour ajouter un nouveau fichier et vous l’appeler menu.html
Étape 2 – Ajout du code HTML du menu
Notre menu sera composé d’un élément parent appelé Menu principal et de cinq éléments enfants. En changeant l’URL à l’intérieur de l’attribut href, vous pouvez lier chaque Menu enfant à une page différente de votre site Web. Vous remarquerez que chaque élément a une classe différente – dropdown , boutonmenuprincipal et dropdown-child . Les classes sont nécessaires pour appliquer différentes règles CSS.
<div class="dropdown"> <button class="boutonmenuprincipal">Menu Principal</button> <div class="dropdown-child"> <a href="http://www.votresite.com/page1.html">Menu enfant 1</a> <a href="http://www.votresite.com.com/page2.html">Menu enfant 2</a> <a href="http://www.votresite.com.com/page3.html">Menu enfant 3</a> <a href="http://www.votresite.com.com/page4.html">Menu enfant 4</a> <a href="http://www.votresite.com.com/page5.html">Menu enfant 5</a> </div> </div>
Voici à quoi le menu HTML ressemble sans aucune règle CSS :
Comme vous le voyez le menu HTML n’est pas très joli. Nous allons appliquer des règles CSS et modifier cela dans l’étape suivante.
Étape 3 – Application de CSS et création d’un effet de déroulement
Nous allons bonifier notre code HTML en utilisant les règles CSS suivantes :
.boutonmenuprincipal { background-color: #e83737; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; font-size: 30px; } .boutonmenuprincipal:hover { background-color: #ff4444; } .dropdown { position: relative; display: inline-block; } .dropdown-child { display: none; background-color: #f28c8c; min-width: 50px; } .dropdown-child a { color: white; padding: 20px; text-decoration: none; display: block; } .dropdown:hover .dropdown-child { display: block; }
Comme vous pouvez voir la classe .dropdown-child a un affichage de règle CSS : none . Cependant , dès que la souris de l’utilisateur passe sur l’élément du menu parent ( .dropdown: hover ) alors le contenu passe en display: block . Cela crée un effet de liste déroulante pour notre menu.
Voici à quoi ressemblera votre fichier menu.html :
<html> <head> <style> .boutonmenuprincipal { background-color: #e83737; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; font-size: 30px; } .boutonmenuprincipal:hover { background-color: #ff4444; } .dropdown { position: relative; display: inline-block; } .dropdown-child { display: none; background-color: #f28c8c; min-width: 50px; } .dropdown-child a { color: white; padding: 20px; text-decoration: none; display: block; } .dropdown:hover .dropdown-child { display: block; } </style> </head> <body> <div class="dropdown"> <button class="boutonmenuprincipal">Menu principal</button> <div class="dropdown-child"> <a href="http://www.votresite.com/page1.html">Menu enfant 1</a> <a href="http://www.votresite.com/page2.html">Menu enfant 2</a> <a href="http://www.votresite.com/page3.html">Menu enfant 3</a> <a href="http://www.votresite.com/page4.html">Menu enfant 4</a> <a href="http://www.votresite.com/page5.html">Menu enfant 5</a> </div> </div> </body> </html>
Dans cet exemple, nous utilisons une feuille de style interne qui signifie que le CSS est placé dans le même fichier que le HTML. Cependant, il existe plusieurs façons de lier le CSS à votre code HTML .
Une fois que vous aurez terminé, le menu déroulant devrait ressembler à ceci :
N’hésitez pas à expérimenter avec le CSS en changeant les couleurs et tailles. Adaptez ce menu à vos besoins !
Conclusion
A travers ce tutoriel, vous avez appris à créer un menu déroulant rapidement avec HTML et CSS. Le code fourni dans ce tutoriel est très léger et n’affectera pas le temps de chargement de votre site !
J’espère vous avoir été utile ! Nous nous reverrons dans un prochain tutoriel ! 😉
Commentaires
mai 08 2020
Merci grâce à vous j'ai pu créer un menu déroulant pour ma page web
juin 01 2020
merci
octobre 13 2020
Merci ! Je n’ai pas encore eu le temps de tester, mais ça va être top pour mon site adaptable sur smartphone :) Pourvu que j’y arrive ^^
septembre 17 2021
Bonjour Ce n'est pas un menu déroulant. Juste un titre avec 5 liens. Rien d'extraordinaire. Et je n'ai pas ma solution pour le déroulé des liens de sous-menus.
janvier 14 2022
Bonjour Madame Valérie. Merci de votre retour ! Comment peut-on vous aider ?