Créer menu

Vous pouvez créer un menu pour votre site Internet de deux façons différentes : horizontal ou vertical. Il s’agit des deux options les plus utilisées. Cet article vous présente comment créer un menu avec la structure HTML mais aussi le fichier CSS.

Le code HTML

Il n’existe pas de balise spécifique pour désigner un ensemble de liens. Cependant, vous pouvez encadré votre menu dans une balise <nav> qui correspond au menu. Le menu d’un site internet se compose d’une liste de liens, liste non ordonnée, ayant comme balise <ul> Par exemple, pour un menu comportant 3 titres :

Créer menu

La balise <ul> est suivie d’un « id=“navigation“ » afin de lui attribuer des propriétés spécifiques dans le CSS. Les « href » permettent de faire un lien vers la page ou la section de votre site correspondante. Voici le rendu :

Créer menu

Créer un menu vertical

Vous pouvez créer un menu vertical et le positionner à droite ou à gauche de votre page. Celui de l’exemple sera à gauche de la page. La largeur du menu sera de 200px et les marges et padding seront supprimés par défaut ainsi que les puces des éléments. Voici les lignes de code dans le fichier CSS et le rendu :

Créer menu
Créer menu

La suppression des marges et des padding va permettre de rendre votre menu du site internet visible par tous les navigateurs. Les éléments d’une liste ont une propriété de type « bloc » ce qui signifie qu’ils occupent toute la largeur définie et disponible et s’empilent les uns sur les autres.
Vous pouvez y appliquer une couleur de fond, une couleur d’écriture et une typographie.

Ajoutez le code suivant afin de modifier un minimum le design du menu :

Créer menu

Ce qui nous donne :

Créer menu

Maintenant, il suffit de modifier les éléments au passage de la souris. On y applique une couleur de fond et un soulignement. Vous pouvez changer la police de caractères, une couleur au texte et d’autres éléments tels que mettre le texte en gras ou en italique par exemple.

Créer menu

Voici le rendu du menu du site internet :

Créer menu

Le menu horizontal

Vous pouvez modifier l’affichage de votre menu pour que le <li> s’affichent comme des éléments de type « inline » et donc pour que votre menu soit horizontal.

Créer menu

Votre menu s’affiche maintenant de la manière suivante :

Créer menu

La largeur des éléments du menu s’adapte automatiquement à la taille du texte. Vous ne pouvez pas gérer la hauteur des <li> mais il est possible d’agir sur les padding et l’interlignage.
Pour l’exemple suivant on centre toute les balises de type « inline » à l’intérieur de la liste puis on supprime les marges, les padding et les puces.

Créer menu

Vous pouvez par la suite modifier les éléments de liste et ajouter une couleur de fond, une couleur de texte, des bordures, une typographie …

Créer menu

Voici le rendu du menu du site internet :

Créer menu

Concernant le menu horizontal, il ne faut pas mettre « display : block » sur les liens car cela va étirer les éléments de liste sur toute la largeur disponible et ils risquent de se superposer.

Vous pouvez appliquer une modification lorsque le curseur passe sur les onglets de votre menu.

Créer menu

Voici le rendu du menu du site internet lorsque l’on passe le curseur sur l’onglet « Titre 3 ».

Créer menu

Les 5 étapes incontournables pour générer de la croissance sur internet


Exploseo

Guide gratuit pragmatique écrit par des experts du digital.
Découvrez comment Créer, Optimiser et Rentabiliser.