HTML & CSS

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

menu-deroulant-css

Introduction

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

  • 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).

creer fichier 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:

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

Ajouter un commentaire

Cliquez ici pour poster un commentaire

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Commencez à économiser dès maintenant !

Hébergement et nom de domaine tout-en-un à partir de

2
45
/mois
>