Si vous cherchez à créer un menu joli et efficace pour votre site web, vous n’êtes pas obligé d’utiliser une application externe ou de coder votre menu avec autre chose que du HTML et du CSS.
En effet, vous avez tous les outils pour créer un menu déroulant complet en HTML et CSS sans avoir à utiliser du Javascript par exemple. Il est important de se passer au maximum de Javascript pour ne par surcharger votre site web de scripts qui pourraient ralentir le chargement votre site et donc impacter l’expérience utilisateur.
Dans cet article, nous vous accompagnerons à travers la création d’un menu déroulant en CSS qui s’adaptera à la taille de vos écrans (responsive).
Sommaire :
Avant de vous lancer dans le code de votre menu, vous aurez besoin de créer ou de modifier deux fichiers.
Ces fichiers à modifier (ou créer) sont le fichier HTML où votre menu sera créé et un fichier CSS lié au fichier HTML où vous définirez l’apparence et le comportement de votre menu déroulant.
Pour relier votre fichier CSS au fichier HTML, vous devrez ajouter entre les balises « <head> » le code suivant en remplaçant « monfichier.css » par le chemin menant à votre fichier CSS :
<link rel="stylesheet" href="monfichier.css">Vous pouvez aussi écrire tout le code CSS dans le fichier HTML entre des balises « <style> </style> », mais par soucis de visibilité et d’organisation, il est préférable de séparer ces deux codes dans deux fichiers distincts.
Lorsque vos fichiers seront prêts, vous pourrez passer à l’étape suivante, c’est-à-dire la création du menu en HTML.
Dans un premier temps, vous allez devoir créer la structure de votre menu en HTML. Le menu sera composé d’un menu principal contenant des éléments et des sous-menus qui apparaîtront lorsque l’utilisateur passera sa souris sur un élément parent du menu principal :
<nav>
<ul>
<li class="menu-deroulant">
<a href="#">Services</a>
<ul class="sous-menu">
<li><a href="#">Graphisme</a></li>
<li><a href="#">Web & App</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li class="menu-deroulant">
<a href="#">Réalisations</a>
<ul class="sous-menu">
<li><a href="#">SpaceX</a></li>
<li><a href="#">Codeur.com</a></li>
</ul>
</li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contactez-nous</a></li>
</ul>
</nav>Voici ci-dessus le code HTML représentant la structure du menu que vous allez créer et que vous devez copier/coller dans votre fichier HTML.
Dans ce code se trouve un élément « nav » qui est un élément HTML de section de navigation. Concrètement cet élément représente une section d’une page contenant des liens vers d’autres pages ou des fragments de la page en question.
Ensuite, nous avons un premier élément « ul » qui est un élément HTML de liste. C’est cet élément qui sera notre menu principal, il contient d’ailleurs des sous-éléments « li » qui seront les éléments de notre menu principal.
Certains sont dotés d’un attribut « class » ayant pour valeur « menu-deroulant », pour indiquer que ces éléments de notre menu principal auront un sous-menu.
À l’intérieur de chaque élément « li » de notre menu principal, nous avons un élément HTML « a » qui est un lien vers la page à rediriger et qui contient aussi le nom l’élément du menu.
La cible de la redirection de ces éléments est indiquée par l’attribut « href ». Remplacez les « # » par l’URL de la page vers laquelle vous souhaitez rediriger l’utilisateur lorsqu’il clique sur l’élément du menu.
Les éléments « li » avec une « class » nommée « menu-deroulant » contiennent aussi un autre menu « ul » qui est le sous-menu du menu déroulant. Ces nouveaux menus « ul » ont d’ailleurs un attribut « class » qui se nomme « sous-menu » pour mieux les repérer.
Dans ces sous-menus, nous retrouvons la même structure que précédemment, c’est-à-dire un ou plusieurs éléments « li » du sous-menu contenant chacun un élément HTML « a » pour rediriger l’utilisateur au clic de cet élément.
Pour le moment, avec seulement le code HTML, le menu ressemble à une simple liste comme ceci :
Maintenant que nous avons la structure HTML du menu, il va falloir le rendre un peu plus joli grâce à du CSS. Voici les différents bouts de code CSS à mettre les uns à la suite des autres dans votre fichier CSS ou vos balises « <style> </style> ».
Nous détaillerons les points importants de ces différents codes pour que vous puissiez bien comprendre comment le menu est créé.
Pour commencer, vous allez définir les propriétés CSS de base de votre fichier CSS et du menu.
:root{
--hauteur-menu: 60px;
}
* {
margin: 0px;
padding: 0px;
font-family: Montserrat, sans-serif;
}
nav {
width: 100%;
font-size: 18px;
position: sticky;
top: 0;
}Ensuite, vous allez devoir organiser et modifier l’apparence du menu principal « ul » et de ses éléments « li ».
nav > ul {
display: flex;
text-align: center;
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
height: var(--hauteur-menu);
}
nav ul {
list-style-type: none;
}
nav > ul > li {
background-color: white;
position: relative;
height: 100%;
flex: 1;
}Lorsque les éléments du menu principal seront correctement organisés, vous pourrez mettre en forme les liens « a » se trouvant dans chaque élément « li » du menu principal « ul ».
nav > ul > li > a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li a {
text-decoration: none;
color: black;
}
.menu-deroulant > a:after{
content: '❯';
font-size: 15px;
margin-left: 7px;
display: inline-block;
}Une fois le menu principal prêt, vous pouvez vous occuper des sous-menus et de leurs éléments.
.sous-menu {
margin-top: var(--hauteur-menu);
width: 100%;
text-align: left;
background-color: white;
border-radius: 2px;
overflow: hidden;
max-height: 0;
}
.sous-menu > li > a {
height: 50px;
padding-left: 20px;
width: 100%;
align-items: center;
display: flex;
}Après avoir ajouté le code CSS à votre structure HTML, vous devriez avoir un menu semblable à celui-ci :
Les sous-menus n’apparaissent pas, car ils sont actuellement cachés par la propriété « overflow :hidden » et « max-height : 0 ».
Dans la prochaine partie de cet article, vous verrez comment faire apparaître les sous-menus lorsque vous survolez les menus déroulants, mais aussi comment ajouter quelques animations pour avoir un menu avec un rendu professionnel.
C’est dans cette dernière partie que le menu déroulant prendra vie. Grâce à la pseudo-classe « :hover » et à la règle « @keyframes » vous allez pouvoir créer un menu professionnel.
La première étape pour donner vie à votre menu est de donner un peu de couleurs aux éléments du menu principal et à ceux des sous-menus.
Ces couleurs permettront d’avoir des indicateurs visuels sur les éléments sélectionnés.
nav > ul > li:hover > a{
color: #2169EC;
}
.sous-menu > li:hover {
background-color: rgba(33, 105, 236, 0.3);
}
.sous-menu > li:hover > a {
color: white;
}
Pour indiquer qu’un élément du menu principal est en train d’être survolé et que son sous-menu est apparu, vous pouvez animer la flèche située à sa droite.
En plus d’apporter un rendu terminé et professionnel au menu, cela améliorera légèrement l’expérience utilisateur.
@keyframes rotationFleche {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}.menu-deroulant:hover > a:after{
animation: rotationFleche 0.2s linear forwards;
}Vous voici à la dernière étape de cet article pour terminer la création du menu déroulant. Le menu est mis en forme, en partie animé, il ne reste plus qu’à faire apparaître le sous-menu d’un élément principal lorsque celui-ci est survolé par un utilisateur.
@keyframes apparitionSousMenu {
0% {
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
border-top: 3px solid #2169EC;
}
30% {
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
}
100% {
max-height: 50em;
border-top: 3px solid #2169EC;
box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
}
}.menu-deroulant:hover > .sous-menu {
animation: apparitionSousMenu 1s forwards;
}Après avoir suivi toutes les étapes de cette dernière partie de l’article, votre menu n’aura pas changé d’apparence, mais il sera cependant interactif.
Essayez de passer votre souris sur un élément du menu déroulant pour déclencher les animations définies et faire apparaître le sous-menu lié.
Comme vous venez de le voir dans cet article, il est tout à fait possible de créer un menu déroulant professionnel avec seulement du HTML et du CSS.
Il est important de se passer de langage de programmation de scripts tel que le JavaScript lorsqu’il existe une alternative avec les seules technologies HTML et CSS pour ne pas surcharger votre site web.
Bien que le code du menu déroulant soit détaillé et expliqué dans cet article, créer un élément entier d’un site web requiert quelques connaissances techniques de base. Sans ces connaissances il se peut que vous ayez tout du même du mal à mettre en place le code de cet article et à créer le menu déroulant comme souhaité.
N’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui pourra vous aider à créer un menu professionnel pour votre site web.