Retrouvez cet article dans : Linux Pratique 32
Nous allons vous montrer ici comment créer un magnifique menu pour votre page d'accueil. Ce menu comportera une image à l’arrière-plan, image qui semblera s'éclaircir au passage de la souris sur chacune des entrées du menu. Il vous est sûrement déjà arrivé de rencontrer un tel menu sur plusieurs sites web. Sachez que cela n'a vraiment rien de compliqué...
Le principe
Tout d'abord, un mot sur le principe d'un tel menu. Certains ont tendance à croire que chaque lien d'un menu graphique est la superposition de deux images. Et donc, au « repos », ce sont les images de premier plan que vous voyez et, au passage de la souris, ce sont les images de second plan qui s'affichent.
Certes, il est tout à fait possible de créer un menu de cette façon, mais cela est fastidieux ! Pour un menu à six entrées, il faudrait découper l'image originale en six morceaux de taille identique, puis créer les six autres images qui s'afficheront au survol des liens, soit 12 images à créer au total...
Heureusement, il y a une méthode beaucoup plus simple et plus rapide : le principe des « portes coulissantes » 1. En réalité, l'image d'arrière-plan de votre menu sera une composition de deux images, accolées l'une à l'autre verticalement.
1 Un site à ce sujet : http://www.ultra-fluide.com/ressources/css/menu-onglets-rollover.htm
Seule une des deux images constituera la partie « visible » du menu. Il faudra bien entendu définir les dimensions du conteneur du menu en conséquence : il devra avoir exactement la même taille que l'image.
La seconde image n'apparaîtra jamais en entier, mais par parties, selon le lien qui est survolé. Il suffira de définir dans la feuille de style qu'à chaque lien survolé (sélecteur a:hover), l'image d'arrière-plan doit être décalée d'un certain nombre de pixels.
Résumons cela avec un schéma de la situation, avec lequel vous pourrez peut-être mieux vous représenter le principe :
Fig.1 : Schéma du principe des « portes coulissantes »
Au préalable
Pour concevoir ce menu, vous aurez besoin de deux images ou plutôt de la même image dupliquée avec beaucoup plus de luminosité. Ces deux images auront bien les mêmes dimensions et la même résolution. Nous allons utiliser les images ci-dessous :
Fig. 2 : Cette photo est l'original. Elle servira d'arrière-plan au menu tant que les liens ne seront pas survolés.
Fig. 3 : Cette photo est la copie de la précédente, mais avec beaucoup plus de luminosité, de façon à l'éclaircir.Â
Fig. 4 : Notre arrière-plan se compose de deux images accolées.
Pour obtenir l'image « éclaircie », il suffit de retravailler votre image dans The Gimp. Ouvrez votre image dans TheGimp, puis allez dans le menu Outils > Outils de Couleurs > Luminosité-Contraste, afin d'augmenter franchement la luminosité. Enregistrez cette seconde image sous un autre nom et accolez les deux dans le sens de la hauteur, comme ci-contre :
Création de la page HTML
Notre page ne va contenir que le menu en question pour simplifier les choses, mais le code définissant le menu est à intégrer dans la page d'accueil de votre site web, parmi tous les autres éléments de la page.
Voici comment est construit notre menu :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="styles_menu.css" type="text/css" media="screen"> <title>Créer un menu graphique</title> </head> <body> <ul> <li><a id="menu1" href="#">Accueil</a></li> <li><a id="menu2" href="#">Services</a></li> <li><a id="menu3" href="#">Produits</a></li> <li><a id="menu4" href="#">Équipe</a></li> <li><a id="menu5" href="#">Plan</a></li> <li><a id="menu6" href="#">Contact</a></li> </ul> </body> </html>
Notre menu est en fait une liste non ordonnée (balise <ul>), autrement dit, non numérotée, de liens (balises <a>). Chaque entrée de la liste est insérée entre les balises <li>...</li>.
Chaque lien comporte un identifiant (ex. : id="menu1"), destiné à repérer précisément un lien parmi les autres (ceci va nous être utile pour la feuille de style). L'attribut href, destiné à recevoir l'adresse de destination du lien, a ici le signe # comme valeur. En effet, n'ayant pas créé un site dans sa globalité, nous n'avons pas d'autres pages vers lesquelles pointer. Le signe # permet ici de rester sur la page courante après un clic.
Pour l'instant, notre menu est assez austère (Fig. 5). Il ne reste plus qu'à lui appliquer un style !
Fig. 5 : Voici à quoi ressemble notre menu avant de définir des styles.
Création de la feuille de styles associée
La première chose à faire est de supprimer les puces des éléments de la liste (affichées par défaut). Puis, s'assurer que les marges externes et internes sont fixées à zéro. Ce qui nous donne la première règle :
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
Nous allons ensuite considérer la liste dans son ensemble et nous allons déclarer son arrière-plan (notre image), ses dimensions et la position du texte qu'elle contiendra :
ul {
background : url("foret.jpg") no-repeat;
width: 200px;
height: 267px;
text-align: center;
}
Notez ici les valeurs très précises de width et height qui correspondent exactement à la moitié de l'image d'arrière-plan (qui mesure 200 x 534 px). La mention no-repeat, attribuée à l'arrière-plan, évite que l'image ne se répète en mosaïque (comportement par défaut d'une image d'arrière-plan, qui occupe ainsi tout l'espace mis à sa disposition).
Il nous faut à présent définir un style pour les liens classiques, ou plutôt « non actif », et un style pour les liens survolés.
li a{
display: block;
color: #ffff00;
font-weight: bold;
font-size: 18px;
font-family: arial, helvetica, serif;
text-decoration: none;
width: 200px;
height: 44.5px;
line-height: 44.5px;
}
La mention display: block; permet « d'imposer » un bloc, chaque lien crée ainsi une nouvelle ligne. Viennent ensuite les propriétés de mise en forme du texte : couleur, graisse, taille et police, sans oublier la suppression du soulignement des liens (par défaut, tous les liens hypertextes sont soulignés) à l'aide de la mention text-decoration: none.
C'est au tour des dimensions de la boîte « lien ». Notez que sa largeur est exactement égale à la largeur de notre image (200px), quant à sa hauteur, elle est le résultat de la hauteur de notre image divisée par le nombre d'entrées du menu, soit 44,5 pixels (267/6 = 44,5).
Enfin, la propriété line-height permet de fixer la hauteur des interlignes. En fixant line-height à 44,5 pixels ici, les entrées du menu sont bien réparties, chacune se trouvera à équidistance des autres et des bords du menu. Sans cette précision, la liste des entrées est « collée » en haut de la boîte « menu ». Notez qu'il y a bien 6 interlignes dans le menu, 5 entiers et 2 demi-interlignes (un en haut et un en bas).
Suit la règle concernant les liens survolés. Nous allons tout d'abord choisir un coloris plus foncé pour le texte (car l'image est plus claire). L'arrière-plan sera bien entendu de la même nature que précédemment :
li a:hover {
color: #8b4513;
font-weight: bold;
background: url("foret.jpg") no-repeat;
}
Pour l'instant, notre menu ne réagit pas tout à fait comme on le souhaiterait. Pour le vérifier, enregistrez votre feuille de style et ouvrez votre page HTML dans votre navigateur (en ayant pris soin de lier la feuille CSS dans l'en-tête de la page). Vous pouvez observer votre image à l’arrière-plan, les différentes entrées, tout semble être correct. Mais approchez la souris et survolez les différents liens : sous chacun apparaît la partie haute de l'image originale et non une partie de l'image éclaircie... (Fig.6)
Fig. 6 : Nous ne sommes pas tout à fait au résultat attendu : le survol des liens ne laisse pas apparaître l'image éclaircie.
Fig. 7 : Les images semblent être superposées... mais il n'en est rien.
Pour remédier à ce problème, il nous reste une dernière chose à faire : définir la position de l'arrière-plan pour chacun des liens. Heureusement, nous avons attribué un identifiant à chacun, ce qui va nous permettre de les définir indépendamment (eh oui, car la position de l'arrière-plan sera bien différente pour chacun). Voici les dernières règles de notre feuille de style :
a#menu1:hover {
background-position: 0 -267px;
}
a#menu2:hover {
background-position: 0 -311.5px;
}
a#menu3:hover {
background-position: 0 -356px;
}
a#menu4:hover {
background-position: 0 -400.5px;
}
a#menu5:hover {
background-position: 0 -445px;
}
a#menu6:hover {
background-position: 0 -489.5px;
}
C'est la propriété background-position qui permet de définir la position de l'arrière-plan 2. Elle permet de fixer la position exacte de l'image dans l’élément HTML concerné. À noter que cette propriété n'a de sens que si l'arrière-plan a reçu la mention no-repeat, comme nous l'avons fait. Cette propriété reçoit comme valeurs les coordonnées (x, y) du coin supérieur gauche de l'image.
2 Certains anciens navigateurs ne savent pas interpréter la propriété background-position.
Pour la première entrée du menu, le coin de l'image à afficher se trouve à (0, -270px), les 270 pixels correspondant à la hauteur totale de l'image originale, ce qui « décale » notre arrière-plan sur l'image éclaircie. La valeur de x ne change jamais puisqu'on effectue un glissement vertical de l'image. En revanche, la coordonnée « y » est augmentée de la hauteur d'un élément de liste, soit 44,5 pixels dans notre cas, à chaque entrée.
Et voilà le résultat en Figure 7 (Testé et fonctionne sous Firefox 1.0.6 et I.E. 6.0) .
Vous pouvez maintenant laisser libre court à votre imagination. Nous avons joué ici sur la luminosité d'une image, mais les deux images utilisées peuvent également être totalement différentes l'une de l'autre, ce qui peut parfois donner quelque chose de très original...
 Retrouvez cet article dans : Linux Pratique 32
