Accueil » Articles » Création d’un menu horizontal simple en HTML et en CSS

Création d’un menu horizontal simple en HTML et en CSS

Aujourd’hui, nous allons apprendre à créer un menu horizontal simple en HTML et en CSS.

Pour suivre ce tutoriel, je présuppose que vous avez déjà des bases en HTML et en CSS. Si ce n’est pas le cas, n’hésitez pas à d’abord regarder mon cours complet traitant de ces deux langages de programmation.

Comprendre ce qu’est un menu

Un menu, c’est avant tout une liste de liens ramenant (dans la majorité des cas) vers d’autres pages de votre site.

Pour créer un menu en HTML et en CSS, nous allons donc utiliser un élément ul correspondant à une liste non-ordonnée.

Chaque élément de notre liste sera matérialisé sous forme d’un lien ramenant vers une autre page de notre site.

Créer le squelette de notre menu en HTML

Commençons donc par créer le squelette de notre menu. On va imaginer un menu comportant quatre éléments.

Je commence donc par créer quatre autres pages que je vais appeler admettons blog.html, shop.html, apropos.html et contact.html pour mon exemple.

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

Je n’écris que le strict minimum dans ces pages, à savoir la structure minimale d’une page en HTML et une ligne de texte : encore une fois, c’est pour l’exemple. Evidemment, vous, vous devriez avoir d’autres pages déjà existantes.

Ensuite, je crée ma liste dans ma page accueil.html qui représente la page d’accueil de mon site. Dans chaque élément de ma liste, je crée donc un lien relatif vers une autre page de mon site.

On cree notre menu en HTML en utilisant ul

Nous avons donc pour le moment une liste classique de liens. On peut tester ; on s’aperçoit que tout fonctionne bien.

Notre menu est une liste

Styliser notre menu avec le CSS

Maintenant, on va s’attaquer à la mise en forme de notre menu grâce au CSS.

Tout d’abord, nous allons entourer notre menu avec des balises HTML <nav> qui ont été créées spécifiquement pour les menus et qui va vous permettre de ne cibler que la liste correspondant à votre menu en CSS. Nous allons également lier un fichier menu.css à notre page accueil.html.

On entoure notre menu avec nav

La première chose à faire en CSS va être de supprimer les puces de notre menu et d’effectuer un reset CSS des marges intérieures et extérieures afin que notre menu s’affiche exactement de la même façon dans tous les navigateurs.

Voici comment on va faire cela :

On supprime les puces de notre menu

Notre menu ne possede plus de puces

Ensuite, on veut que les éléments de notre menu se placent les uns à côté des autres et non pas les uns sous les autres.

Pour faire cela, nous allons devoir modifier le comportement par défaut des éléments li. Par défaut, ces éléments sont de type block. On va modifier leur type en inline-block grâce à la propriété display.

On remet notre menu horizontalement avec display

Ensuite, on peut harmoniser la taille des éléments de notre menu avec les propriétés width et height. On peut également leur appliquer des bordures légères sur nos éléments de liste.

On harmonise nos éléments li

On s’aperçoit alors qu’il y a un petit écart entre les éléments (normalement, les différents éléments devraient être collés à la bordure sur leur gauche).

Ceci n’est pas un bug à proprement parler : il faut savoir que cela arrive à chaque fois que l’on utilise le type inline-block en CSS.

Pour y remédier, il suffit de supprimer les espaces dans notre code entre les éléments en question, en collant des commentaires au milieu par exemple.

Cette technique paraît un peu farfelue, j’en conviens, mais elle à le mérite de fonctionner.

ON supprimer les espaces entre les éléments li

On peut continuer et centrer le texte horizontalement à l’intérieur de nos éléments avec la propriété text-align.

On peut également le centrer verticalement en rusant un peu en appliquant un line-height avec une valeur égale à la valeur de la propriété height à nos éléments li.

On peut encore supprimer la mise en forme par défaut des liens avec les propriétés text-decoration et color et ajouter une couleur de fond à notre menu.

ON met en forme nos liens et notre menu

On va maintenant faire en sorte que les liens occupent tout l’espace à l’intérieur des éléments li afin que vos visiteurs puissent cliquer n’importe où sur votre menu. Pour cela, on va transformer leur type en type block.

On change le type de nos éléments a

Finalement, on peut appliquer un style différent aux éléments de notre menu lorsque vos visiteurs passent leur souris dessus en utilisant le pseudo-format :hover.

On utilise le pseudo format :hover pour dynamiser notre menu

Voilà, c’est tout pour notre menu simple ! Prochaine étape : créer un menu déroulant ou responsive. Nous verrons tout cela prochainement !

10 commentaires

  1. Merci Pierre pour la simplicité.
    Tout a marché pour moi,
    Un seul détail: pour le code CSS, j n’ai pas utilisé un fichier externe, j’ai intégré le tout dans le fichier .html.

    Abdelatif (Algérie)

  2. Salut Pierre
    Juste te dire un grand merci pour ces vidéos. J’ai commencé le cours html cette semaine et j’avoue je ne pigeais rien du tout. Grâce à tes vidéos et surtout ta méthodologie j’ai compris beaucoup de choses et commence par voir plus loin. Merci et bonne continuation

  3. bonjour
    est ce que vous pouver ecrire une programmation complete menu horizontal en guise d exemple, je suis un amateur j ai suivi les etapes mais je n ai pas de resultat.
    merci

    • Bonjour,

      C’est déjà ce que je fais dans ma vidéo il me semble… Si vous voulez que je vous fournisse un fichier déjà tout fait, la réponse est non : je suis là pour apprendre aux gens à coder, pas pour coder à leur place 🙂

      Amicalement,
      Pierre

  4. Bonjour Pierre,
    Merci tout d’abord pour vos tutos clairs et précis.
    Après avoir suivi votre cours sur html5 et css3 je me suis dit tiens je vais faire un menu horizontal mais je n’obtiens rien en mettant list-style-type:none; dans la page de style.css j’ai toujours les puces a cote …
    j’ai remis votre syntaxe je suis sous ubuntu 14.04 lts, firefox et gedit.
    Merci pour vos conseils

    • Bonjour,

      Vérifiez bien que vous appliquez la propriété CSS aux bons éléments. N’hésitez pas à revoir bien en détail mon cours sur la création d’un menu en HTML et CSS. sans plus d’informations, je ne peux pas vraiment vous en dire plus, désolé…

      Amicalement,
      Pierre

  5. Superbe tuto comme tous les autres d’ailleurs. J’ai suivi la série html & css entièrement et j’ai attaqué la série php maintenant. Un très grand merci, j’ai appris énormément. J’ai hâte de voir arriver les tutos pour la création des autres types de menu. Bonne coontinuation.

  6. Merci de vos précieux conseils .

  7. Juste un grand merci pour ce tuto et tous les autres.
    Je suis fan
    Clément

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*