Créer un menu horizontal

Dans ce tutoriel, nous allons vous apprendre à créer un menu horizontal pour votre site Web.

Il n'y a rien de très compliquer rassurez-vous. Tout ce dont vous avez besoin pour réaliser un tel menu a été appris sur ce site.

Les outils dont nous allons nous servir:

• Les liens
• La balise <div>Block
• Positions d'objets en CSS
• L'attribut CSS display
• L'attribut CSS float

Le code XHTML

Avant de commencer à coder, observons la structure de notre menu:

Les trois cases bleu clair représentent les liens de notre menu. Comme vous le savez, la balise <a> est de type inline. Nous allons donc en faire un block grâce à l'attribut css display, aligner tous les blocks ainsi créés et les entourés d'un block général (en bleu foncé sur le schéma) qui permettra d'avoir l'impression que le menu est réalisé en un seul block.

Passons maintenant au code XHTML:

Tester

Voici donc nos 3 liens entourés par un block <div>. Vous aurez remarqué que sur chaque lien nous avons mis l'attribut class, ici ce n'est pas indispensable étant donnée que nous n'avons qu'un menu a faire mais lorsqu'il s'agit d'un site Internet complet, on se perd très vite...

Le code CSS

Pour cette partie, nous n'allons pas vous montrer la solution dès le début, nous allons expliquer les étapes à suivre ainsi que les outils à utiliser. Vous aurez tout de même le code complet en fin de page ;).

Première étape, nous allons nous occuper de l'aspect général de notre menu en définissant par exemple une hauteur de 50px et une image de fond "fond_menu.png" qui sera répétée horizontalement.

Maintenant occupons nous des liens.
Comme nous l'avons évoqué plus haut, les liens doivent dans un premier temps être convertis en block grâce à l'attribut css display.
Pour aligner horizontalement tous les liens, il suffit simplement de mettre tous les liens flotant à gauche.
Il ne reste plus qu'à placer correctement nos liens. Définir une hauteur de 25px semble être correct, il faut maintenant définir une largeur. Pour que le menu soit extensible (c'est à dire qu'il s'étale sur toute la largeur de la page même si celle-ci est redimensionnée), nous allons définir la largeur des liens en pourcentage: ici nous avons 3 liens donc il faut indiquer une largeur de 33.3% (100%/3).
Petite chose qui a son importance, veillez à ce que la somme des largeurs des lien soit inférieur strictement à 100% car nos liens sont définis comme étant des flottants donc si la taille totale est supérieur à la taille de la page, le dernier lien sera situé à la ligne et ce n'est pas ce que nous voulons.
Ajoutons une marge extérieure de 13px pour centrer verticalement nos liens dans notre menu.
Les blocks liens sont maintenant positionnés mais il faut centrer le texte à l'intérieur de chaque block avec un text-align.

Et voila, vous avez maintenant un menu horizontal très simple mais nous allons y ajouter un petit quelque chose qui va grandement l'améliorer, nous allons afficher une image de fond lorsque le curseur de la souris passe sur un lien.
Utilisez le pseudo-format hover sur les "lien_menu" et définissez une couleur de fond ou même une image avec l'attribut background. Nous avons choisi une image plutôt qu'une simple couleur de fond mais il ne faut pas oublier de la centrer dans notre block lien et veiller à ce quelle ne s'affiche qu'une seule fois.

Pour ceux qui n'auraient pas réussi a créer le fichier css, voici une solution possible:

Tester

Améliorations

Ce menu est un menu simple qui fonctionne très bien mais il est bien évidement possible de le modifier et de le personnaliser. Par exemple vous préféreriez peut être avoir une couleur unie pour le fond... il suffira juste de modifier le background.

Vous avez certainement dû remarquer qu'il est possible de cliquer sur le lien sans pour autant cliquer sur le texte. Si vous souhaitez modifier cela et ainsi faire comme pour notre site Web, entourez chaque lien par des balises <div> et retirez le display. Les blocks ainsi créés remplacerons les blocks liens. A vous de les positionnés de la même manière que précédemment.
La zone "cliquable" sera de cette manière réduite à la zone de texte et non plus à 1/3 de la largeur de la page.

Une autre amélioration très simple, la personnalisation des liens. Pourquoi laisser ces liens bleus soulignés pas très beaux (même si nous nous les avons laissés) alors que le css vous permet de faire ce que vous voulez. Et pourquoi ne pas mettre des bordures à chacun de nos liens???

Une dernière petite amélioration avant de laisser libre recours à votre imagination, arrondir les bords du menu.
La technique est simple, nous allons ajouter 2 images: une image flottante à gauche et une image flottante à droite. Il ne faut pas oublier de déduire la largueur des 2 images que l'on ajoute des largeurs des liens (nous passons de 33.3% à 31% par exemple) et de réaliser une marge à droite et à gauche de même largeur que ces 2 images. Une grande explication serai presque inutile, vous comprendrez en observant le nouveau code:

Tester

Vous voila donc capable de réaliser un menu horizontal, votre seule limite sera certainement votre imagination.
Amusez-vous bien...