HTML & CSS

Déc 03, 2021

Fatima Z.

3minutes de lecture

Créez un menu déroulant ultra-facilement en CSS !

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 😉

Ce dont vous aurez besoin

Avant de créer un menu déroulant en HTML/CSS, vous aurez besoin des éléments suivants :

É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
Capture de sous pages sur le plan d'hebergement de hotsinger

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

Capture du création de file manager

É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 :

apercu menu html

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 :

Menu déroulant principal

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 ! 😉

Author
L'auteur

Fatima Zahra

Fatima Zahra est une passionnée du marketing digital et de l'IT, elle fait partie de l'équipe du contenu de notre site web pour apporter à nos chers internautes une meilleure expérience client. Ses passes- temps impliquent le blogging et l'apprentissage des langues pour se connecter véritablement au cœur avec les autres.

Plus d'informations sur Fatima Zahra