Menu horizontal

Ce tutorial est destiné à la réalisation d'un menu horizontal en CSS pour la réalisation d'un template Jimdo. Le but de ce petit cours est de faire une introduction au CSS et à la manière de réaliser une partie d'un template Jimdo.

Pour suivre ce tutorial, il est préférable d'avoir des notions concernant l'XHTML et le CSS. Tout ne sera pas expliqué en détail.

L'objectif du tutorial est de réaliser un menu similaire à celui présent sur le site Template Velipart. Ce dernier ne se veut pas parfait, ne prétend pas non plus être très esthétique, mais c'est une introduction parfaite pour comprendre comment réaliser un menu horizontal. Par ailleurs, une fois les connaissances de bases acquises, il n'est pas trop dur de personnaliser le menu à ses souhaits.

Le contenu des pages web Jimdo est écrit en XHTML et le CSS est utilisé pour définir la façon dont les pages sont présentées (couleur, disposition ...). Sans le CSS, les pages web sont très peu esthétiques.

Un menu Jimdo sans CSS, n'est autre qu'une liste à puce. Il ressemble alors à l'image ci-dessous:

Le code XHTML ne peut être modifié. De ce fait, l'intégralité de ce tutorial va consister à modifier le CSS pour transformer cette liste à puce en menu horizontal.

Parce que le menu final est horizontal, il faut tricher un peu pour se simplifier la vie. Le principe va consister à créer trois menus (comme celui présenté sur l'image plus haut):

• Premier menu: il faut afficher les liens du niveau 1 (zone rouge sur l'image plus haute).
• Deuxième menu: il ne faut afficher que les liens du niveau 2 (s'il y en a).
• Troisième menu: afficher uniquement les liens du niveau 3 (s'il y en a).

Pour rappel, pour ajouter un menu lors de la conception d'un template, il faut utiliser le code: <var>navigation[1|2|3]</var>

De ce fait, le code XHTML pour le menu va ressembler à ceci:

<div id="menu">
    <div id="subMenu1">
        <var>navigation[1|2|3]</var>
    </div>
    <div id="subMenu2">
        <var>navigation[1|2|3]</var>
    </div>
    <div id="subMenu3">
        <var>navigation[1|2|3]</var>
    </div>
</div>

Voici le premier bout de code CSS avec des commentaires pour expliquer les étapes importantes:

#menu ul{
list-style-type:none; /* enlever les puces de l'élément "liste à puce" */
text-align:center; /* centrer le menu */
}
#menu li{
display:inline; /* transformer les puces en éléments "textes" */
}
#menu li a{ /* Modifier l'aspect des liens */
margin:0px 4px; /* Faire une marge pour ne pas que les liens se touchent */
padding:3px 4px;
font-size:1.1em; /* Agrandir la taille des liens */
text-decoration:none; /* Ne pas souligner les liens */
background:#dedede;
-moz-box-shadow:0 0 3px #777; /* Effet d'ombre */
-webkit-box-shadow:0 0 3px #777;
box-shadow:0 0 3px #777;
border:1px solid #aaa;
-moz-border-radius:3px; /* Effet de coins arrondis */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

La deuxième et dernière partie du code CSS permet de finir le tutorial. Les boûts de code ont été commentés pour être mieux compris.

div#subMenu1 ul.mainNav2{

display:none;} /* Sur le premier menu: afficher uniquement les liens du niveau 1 */
div#subMenu2 ul.mainNav1 li a.level_1, div#subMenu2 ul.mainNav3 li a.level_3{

display:none;} /* Sur le deuxième menu: afficher uniquement les liens du niveau 2 */
div#subMenu3 ul.mainNav1 li a.level_1, div#subMenu3 ul.mainNav2 li a.level_2{

display:none;} /* Sur le troisième menu: afficher uniquement les liens du niveau 3 */
div#subMenu1, div#subMenu2, div#subMenu3{
text-align:center; /* Centrer les menus */
padding:7px 0; /* Ajouter de l'espace entre les menus */
}
div#subMenu1 ul, div#subMenu2 ul, div#subMenu3 ul{

display:inline;} /* Transformer les éléments "liste à puce" en élément "texte" */
div#subMenu1 ul{

font-size:1.1em;} /* Agrandir la taille des liens du premier menu */
div#subMenu3 ul{

font-size:0.9em;} /* Rétrécir la taille des liens du troisième menu */
div#subMenu1 ul li a.current, div#subMenu2 ul li a.current, div#subMenu3 ul li a.current{

font-weight:bold;} /* Mettre en gras la page courante */

Une fois le dernier morceau de CSS ajouté, le menu devrait être opérationnel. Il ne reste plus qu'à le personnaliser. Le CSS fournit tout un panel de possibilité pour personnaliser l'affichage des éléments (bordures, image de fond, disposition, taille des éléments ...).

Par ailleurs, il reste à finir tout le reste du design personnalisé (contenu, pied de page et sidebar).

Sur ce tutorial, les différents niveaux de navigation sont situés l'un au dessus de l'autre. Pour faciliter la compréhension de navigation et réduire la taille que prend le menu sur ce template, il est possible d'afficher le menu principal en haut (en menu horizontal) et s'il y a des sous-menus (les niveaux de navigation 2 et 3) ils peuvent être placés dans la barre latérale de navigation. Il faut alors modifier le XHTML et le CSS en conséquent.