Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CREER UN MENU SIMPLE EN HTML ET EN CSS

Présentation de l’exercice

L’objectif de cet exercice est de réaliser un menu simple et moderne entièrement en HTML et en CSS.

Pour réaliser cet exercice dans de bonnes conditions, il vous faut auparavant une bonne connaissance de base du HTML et du CSS.

Voilà à quoi va ressembler notre menu une fois terminé :

Menu HTML CSS simple terminé

Voici les différentes étapes que nous allons suivre pour mener à bien cet exercice :

  1. Etape de réflexion ;
  2. Création du squelette du menu en HTML ;
  3. Mise en forme du menu en CSS.

Etape n°1 : La réflexion

Comme toujours, même pour des projets apparemment simples, il ne faut pas se jeter tête baissée dans le développement mais commencer par réfléchir au résultat que l’on souhaite obtenir et comment l’obtenir.

Cette étape de réflexion est essentielle et permet bien souvent de gagner du temps au final en évitant des erreurs et des réajustements en milieu de projet.

Dans notre cas, il s’agit de créer un menu simple mais moderne en HTML et en CSS uniquement.

Nous allons donc déjà avoir besoin de plusieurs pages HTML et d’un fichier CSS pour la mise en forme.

Pour créer le menu, nous allons utiliser des éléments HTML de liste ul et li que nous allons ensuite styliser en CSS.

Nous créerons les liens de nos onglets de menus avec l’élément HTML a.

De plus, nous voulons que notre menu soit aéré et occupe toute la largeur de la page.

Etape n°2 : Création du squelette HTML du menu

Une fois que l’on sait ce qu’on souhaite obtenir, il est temps de se mettre au travail.

On commencera toujours par créer la structure d’un projet, son « squelette » en HTML avant de le styliser en CSS.

On va donc commencer, comme on l’a dit, par créer cinq fichiers HTML (un contenant notre menu et quatre autres qui seront les pages de destinations des liens de notre menu.

Nous allons appeler ces fichiers :

Pour le moment, nous allons nos contenter d’écrire la structure minimale d’une page HTML dans chacun d’entre eux afin de les rendre valides ainsi qu’une phrase de texte pour les distinguer.

On crée cinq fichiers HTML

Pour plus de simplicité au niveau des liens, nous allons enregistrer tous ces fichiers dans le même dossier.

On enregistre nos fichiers dans un même dossier

Maintenant, nous allons nous concentrer sur la page accueil.html sur laquelle nous allons créer notre menu en HTML.

Pour cela, pas de grande surprise : on utilise l’élément HTML nav pour définir notre menu principal de navigation, puis un élément ul pour définir notre menu en soi et des éléments li pour chaque onglet de notre menu.

A l’intérieur des éléments li, on crée des liens ramenant vers les pages créées grâce à l’élément a.

On crée notre menu en HTML

Comme on sait déjà que l’on voudra par la suite attribuer des styles différents à chaque onglet, on donne à chacun un attribut class avec une valeur différente.

Voilà à quoi ressemble notre menu pour le moment :

Menu HTML fonctionnel mais non mis en forme

Celui-ci ne correspond certainement pas à l’idée que vous vous faites d’un menu. C’est normal : nous ne l’avons pas encore mis en forme en CSS.

Cependant, celui-ci est déjà totalement fonctionnel : lorsque l’on clique sur un lien, nous sommes bien ramenés vers la page correspondante.

Notre menu HTML ramène bien vers les bonnes pages

Etape n°3 : Mise en forme CSS de notre menu HTML

La première chose à faire va être de créer un fichier CSS que l’on va appeler menu.css et de lier nos deux fichiers accueil.html et menu.css entre eux en utilisant l’élément HTML link.

On lie un fichier HTML et un fichier CSS avec l’élément link

On va ensuite effectuer un « reset CSS » des marges intérieures et extérieures des éléments body et ul afin que notre menu s’affiche de la même façon sur tous les navigateurs.

On va également en profiter pour changer la police d’écriture de notre page.

On effectue un reset CSS sur notre body

Nous allons maintenant modifier nos éléments li. Tout d’abord, nous allons enlever les puces devant ceux-ci avec la propriété CSS list-style-type puis nous allons les placer côte-à-côte en les faisant flotter grâce la propriété CSS float.

On change le style des éléments de liste avec list-style-type et display

Nous sommes ici confrontés à un problème : lorsqu’un élément non flottant contient des éléments enfants flottants, le CSS va faire collapser le parent, qui n’aura plus de hauteur.

Cela va être le cas pour notre élément ul ici.

La solution la plus simple pour résoudre le problème est d’appliquer un overflow : hidden à l’élément contenant les éléments flottants (donc ici à ul). Cela rétablira la hauteur de l'élément ul.

On utilise overflow : hidden pour rétablir la hauteur de notre élément

C’était la seule vraie difficulté de l’exercice. Le reste n’est plus que de la mise en forme pure et dure.

Nous allons ajouter une couleur de fond à notre élément nav et étendre sa taille à 100% de son élément parent, c'est-à-dire l’élément body.

On étend la taille de notre élément nav et on lui ajoute une couleur de fond

Après cela, nous allons nous concentrer sur nos liens. Nous allons commencer par changer leur type en inline-block et allons leur ajouter une marge intérieure afin d’étendre la taille de nos onglets de menu tout en faisant en sorte qu’ils soient cliquables sur toute leur surface.

Nous allons également enlever le trait de soulignement de nos liens et changer la couleur du texte de ceux-ci afin que tout devienne lisible.

On modifie le type de nos liens et la décoration

Voilà le résultat visuel. C’est déjà beaucoup mieux !

Notre menu HTML et CSS est presque terminé

Finalement, nous allons vouloir changer la couleur de chaque onglet lors du survol de la souris par un utilisateur et ajouter également une bordure haute.

Pour faire cela, nous allons utiliser la pseudo classe CSS :hover.

La pseudo classe ou pseudo format CSS :hover

Le problème ici est que l’ajout de la bordure au survol fait descendre le texte de l’onglet et augmente la taille du menu de la taille de la bordure.

Notre menu est décalé à cause de CSS border

Pour compenser cela, nous allons réduire la valeur du padding-top appliqué à nos liens lors de leur survol d’un montant équivalent à la taille de la bordure (5px).

On change le padding de nos liens au survol

Voilà, notre menu est terminé ! Celui-ci a été créé exclusivement en HTML et en CSS.

Notre menu HTML et CSS est terminé