Construire un menu en CSS
CHAPITRE 12
173
On reconnaît la forme raccourcie de la propriété background. Rappelons qu’elle
donne dans l’ordre le chemin vers l’image (url), sa position (left center), et le
mode de répétition (no-repeat ne fera afficher l’image qu’une seule fois, le comportement par défaut la multipliant selon un schéma de damier).
Lors du survol du lien par le pointeur de la souris, seul le chemin d’accès vers l’image
de fond est affecté. Visuellement, on observera donc un effet de changement temporaire d’arrière-plan. La spécification d’une marge interne à gauche (padding-left)
évite au texte du lien de s’afficher par dessus la puce.
Nous n’avons ici qu’effleuré le sujet abordé dans le chapitre suivant, portant sur les
images réactives et les menus graphiques dynamiques.
Pour aller plus loin
Listamatic est un site web en anglais entièrement consacré à la conception de menus
en CSS : http://css.maxdesign.com.au/listamatic/ Vous y trouverez de nombreuses versions de menus verticaux, horizontaux, déroulants, et d’autres plus originaux encore.
Alsacréations propose également une galerie de menus en CSS, principalement graphiques, pour vous aider à trouver l’inspiration : http://css.alsacreations.com/Galeriesde-menus-en-CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
}
#menu a{
text-decoration: none;
color: #000;
padding-left: 20px;
background: url(dossier/image1.png) left center no-repeat;
}
#menu a:hover, #menu a:focus{
background-image: url(dossier/image2.png);
}