Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CREATION D’UN MENU DEROULANT EN HTML ET EN CSS

Présentation de l’exercice

Le but de cet exercice est de réaliser un menu déroulant entièrement en HTML et en CSS, sans utiliser d’autres langages comme le JavaScript.

Voilà le résultat auquel on veut parvenir :

Menu HTML et CSS déroulant terminé

Bien entendu, vous pourrez par la suite changer les couleurs ou le style général du menu très simplement en CSS afin que celui-ci vous convienne parfaitement.

Etape n°1 : La réflexion

Comme souvent, avant de se lancer dans un développement, il faut réfléchir à ce qu’on souhaite obtenir au final afin de maximiser son efficacité et d’avoir le meilleur rendu final.

Dans notre cas, nous voulons un menu qui fasse moderne, qui soit aéré avec des couleurs qui se détachent bien les unes des autres, et surtout nous voulons que lorsqu’un visiteur passe sa souris sur l’un des onglets du menu, une liste de sous-onglets cliquables s’affichent.

Pour notre menu, nous allons utiliser des listes imbriquées les unes dans les autres que nous allons ensuite styliser en CSS.

Nous allons faire un menu avec quatre onglets ; les trois premiers onglets comportant chacun quatre sous onglets.

Pour l’affichage et le changement de couleur lors du passage de la souris, nous utiliserons la pseudo classe CSS :hover et les propriétés adaptées.

Etape n°2 : Le squelette HTML de notre menu déroulant

Lorsque vous démarrez un travail en HTML / CSS, je vous recommande vivement de toujours commencer par créer le squelette HTML avant de faire une quelconque mise en forme CSS. Cela maximisera votre efficacité.

En HTML, nous allons commencer par créer cinq pages : une page d’accueil et les quatre pages correspondant aux quatre onglets de notre menu.

En théorie, nous devrions également créer les pages pour les sous-onglets mais ce serait un peu long et redondant et cela n’apporterait pas grand chose à l’exercice, donc nous allons nous en passer.

On va donc créer nos cinq pages en indiquant seulement la structure minimale en HTML pour rendre une page valide ainsi qu’un titre et une phrase pour pouvoir différencier chaque page.

On commence par créer cinq pages HTML pour notre menu

Nous allons appeler ces pages :

Pour plus de simplicité, nous allons enregistrer nos cinq pages dans le même dossier.

On enregistre les pages de notre menu dans le même dossier

A partir de maintenant, nous allons nous concentrer sur la page accueil.html qui va accueillir notre menu.

Nous allons commencer par enfermer tout notre menu dans l’élément structurant HTML5 nav qui sert à définir le menu de navigation principal d’un site.

Ensuite, nous allons créer le premier niveau de notre menu avec les éléments ul (pour le menu en soi) et li (pour chaque onglet de notre menu).

Comme on sait que chaque onglet aura un style légèrement différent, on pense d’ores et déjà a donner un attribut class à chaque élément li.

Pour le moment, vous devriez donc arriver à cela :

Le début du squelette HTML de notre menu

Ici, nous avons donc créé notre liste que nous allons transformer en menu, avec un lien dans chaque élément de la liste représentant chaque onglet du menu qui ramènera vers les pages que nous avons créées.

Comme indiqué, nous attribuons un attribut class à chaque élément li.

Ensuite, nous allons créer le deuxième niveau de notre menu, c’est-à-dire les sous-onglets.

Pour cela, il va nous falloir créer une nouvelle liste dans chaque élément li. Ce n’est pas très compliqué, faites juste bien attention à ne pas vous emmêler avec les balises ouvrantes et fermantes des éléments.

Comme nous comptons donner le même style à tous nos sous menus, nous allons attribuer à chacun d’entre eux un attribut class avec la même valeur.

Création des sous onglets du menu HTML déroulant

Comme je vous l’ai indiqué, nous créons une nouvelle liste à l’intérieur de chaque élément li (sauf pour la page de contact).

Ici, nous avons utilisé un « # » en valeur de href à la place de créer un véritable lien vers nos sous-onglets. Rappelez vous que nous n’avons pas créé les pages correspondantes, nous utilisons donc le dièse pour indiquer que le lien ne sera pas actif.

Et voilà tout pour la partie HTML de notre menu. Jusque là, vous ne devriez pas avoir eu de grosse surprise ni de gros problème.

Ce menu est parfaitement opérationnel : si l’on clique sur un lien, nous sommes bien amené vers la bonne page. Il a juste besoin d’un minimum de mise en forme CSS, chose que nous allons faire dès maintenant.

Pour cela, je vous invite déjà à créer un nouveau fichier que l’on va appeler menu.css et à l’enregistrer dans le même dossier que nos pages HTML. Ensuite, nous allons lier nos fichiers HTML et CSS grâce à l’élément HTML link.

Nous lions nos fichiers HTML et CSS avec l’élément link

Etape n°3 : La mise en forme CSS de notre menu déroulant

En CSS, il va s’agir de procéder avec un peu de méthode. Nous allons d’abord nous occuper des styles généraux, puis nous appliquerons les styles particuliers à chaque élément.

La première chose que nous allons faire est d’effectuer un reset CSS des marges intérieure et extérieure des éléments body et de notre menu (élément ul) en soi.

En effet, selon les navigateurs, ces éléments peuvent recevoir automatiquement des padding et margin différents, et nous voulons éviter cela.

Nous allons également en profiter pour changer la police d’écriture utilisée pour notre page avec font-family.

On effectue un reset CSS sur les éléments body et ul de notre menu

Ensuite, nous allons enlever les puces devant tous les éléments li et mettre les éléments li de notre première liste ul (c’est-à-dire nos onglets) côte-à-côte.

Les éléments li correspondant à nos sous onglets devront rester en colonne. Pour ne cibler que les éléments de notre première liste, nous allons utiliser le signe >, puis nous allons utiliser la propriété float.

Nous enlevons les puces devant nos éléments li et mettons les éléments li de notre menu en ligne avec display

Les sous-onglets de notre menu devront être cachés tant qu’un utilisateur ne passe pas sa souris sur l’onglet auquel ils appartiennent. Pour le moment, nous allons nous contenter de les cacher tout simplement avec display:none.

On cache nos sous onglets avec display none

Voilà où nous en sommes pour le moment niveau rendu :

Notre menu déroulant HTML est en cours de création

Comme vous pouvez le voir, c’est un peu mieux mais il reste du travail !

Cependant, maintenant que nous y voyons un peu plus clair, nous allons pouvoir nous occuper plus en profondeur du style des éléments composant notre menu.

Nous allons étirer notre élément nav afin que notre navigation prenne tout l’espace disponible dans la page et allons également en profiter pour lui donner une couleur de fond bleu-gris.

On modifie la taille et la couleur de notre menu de navigation

Ensuite, nous allons également attribuer une position:relative aux éléments li représentant nos onglets. Cela nous sera très utile plus tard pour positionner exactement les sous-onglets sous les onglets.

On attribue une position relative et un float left à nos éléments li

Ici, nous sommes confrontés à un problème en CSS. En effet, vous devez savoir que lorsqu’un élément parent non flottant possède des éléments enfants flottants, le CSS va faire collapser le parent qui va alors avoir une hauteur égale à zéro pixel.

Le meilleur moyen de remédier à cela est d’appliquer un overflow:hidden à l’élément parent.

Seulement, nous n’allons pas pouvoir procéder comme cela ici car cela cacherait par la suite nos sous-onglets.

Nous allons donc devoir ruser un petit peu en utilisant le pseudo élément CSS::after et les propriétés content, display et clear.

Un élément parent non flottant collapsera s’il possède des éléments enfants flottants

Maintenant que cela est réglé, nous allons nous préoccuper du style de nos liens en soi.

Nous allons commencer par leur ajouter une marge intérieure afin d’étendre la taille de nos onglets tout en faisant en sorte que tout l’onglet reste cliquable.

Pour que cela s’affiche bien, il va également falloir que l’on définisse un autre display pour nos éléments a.

Nous allons également changer la couleur du texte de nos liens et supprimer le trait de soulignement.

On modifie le style de nos liens en changeant leur display, color et padding

Faites toujours bien attention à cibler les bons éléments : ici, je veux enlever le trait de soulignement et changer le display de tous les liens de mon menu (onglets et sous-onglets). En revanche, je ne veux appliquer le padding et la couleur qu’aux liens de mes onglets.

Nous en avons fini avec le premier niveau de notre menu. Voilà le résultat visuel pour le moment :

Le premier niveau de notre menu HTML déroulant est terminé

Nous allons commencer par l’affichage de nos sous-onglets. Nous voulons que ceux-ci s’affichent uniquement lorsqu’un utilisateur passe sa souris sur l’onglet correspondant.

Nous allons également positionner nos sous-onglets par rapport à nos onglets.

Pour cela, nous allons positionner nos sous-menus avec position:absolute et utiliser les propriétés top et left.

Nous allons également rajouter un z-index à nos sous-menus afin que ceux-ci s’affichent bien au dessus des contenus que vous pourriez rajouter par la suite dans vos pages.

On positionne nos sous-menus par rapport à nos onglets avec position, top et left.

Ensuite, nous allons nous attaquer aux styles généraux de nos sous-onglets.

On va commencer par ajouter une fine bordure entre chaque élément.

En même temps, nous allons définir une largeur fixe pour nos liens de sous-menu, ajouter une petite marge intérieure, changer la taille et la couleur de l’écriture.

On modifie le style de nos éléments HTML de sous menus

Voilà ce que ça donne :

Menu déroulant HTML en cours de finition

Il ne nous reste maintenant plus qu’à effectuer un dernier travail d’habillage en attribuant des styles spécifiques à chaque onglet et sous-menu.

Je vous propose donc d’afficher une bordure haute d’une couleur différente pour chaque onglet de notre menu. Cette bordure ne devra apparaître qu’au survol de la souris.

Nous allons également rajouter une couleur de fond pour chacun de nos onglets qui apparaîtra en semi transparence afin de ne pas gêner la lecture pour vos visiteurs.

On ajoute une bordure et une couleur de fond au survol de la souris pour notre menu

En ajoutant la bordure, on s’aperçoit que cela décale l’écriture vers le bas de la hauteur de la bordure.

Notre écriture est décalées à cause de la bordure

Nous allons remédier à cela en réduisant la valeur du padding-top de nos liens lors du survol de la souris d’une hauteur équivalente à notre bordure.

On réduit le padding de nos éléments a pour compenser le décalage dû à la bordure

Voilà, notre écriture reste maintenant à la même hauteur même lorsqu’on passe sa souris sur l’onglet :

Notre élément a a été complètement stylisé en CSS

Il ne nous reste alors plus qu’à ajouter de la couleur à nos sous-onglets.

Nous allons ajouter deux nuances de couleurs différentes selon que l’utilisateur passe sa souris sur un élément en question ou non.

Lorsque l’utilisateur passe sa souris sur un élément, on veut que la couleur de fond soit plus foncée et on veut également changer la couleur de l’écriture de nos liens ainsi que le poids de la police.

Voilà l’arrangement de couleurs que je vous propose :

Ajout de couleurs de fond au survol pour nos éléments de sous-menu

Et voici le résultat final :

Menu déroulant en HTML et CSS terminé

Conclusion : un menu déroulant en HTML et en CSS

Nous venons de créer un menu déroulant parfaitement fonctionnel et moderne uniquement en utilisant le HTML et le CSS.

Vous pouvez à loisir modifier les couleurs de ce menu ou des styles plus généraux afin de le styliser à votre convenance.

La seule chose qui manque à ce menu est un aspect responsive.