Menu CSS de type rollover avec une seule image en background !
Publié le jeu, 08/10/2009 - 23:13 par robin
Comment créer des menus en CSS utilisant des images plaquées en "background" et qui changent au survol des liens.
Ces menus très esthétiques vont vous permettre de réellement personnaliser votre site web en exploitant vos talents de webdesigner.
Exemple 1: navigation horizontale :
Visualisez le résultat final :
Le code xhtml :
Le code est très simple, il s'agit tout simplement d'une liste non ordonnée de liens. Je l'ai directement placée dans le body, mais vous pouvez bien sûr la placer dans un bloc (div):
<body>
<ul>
<li><a id="menu1" title="menu1" href="#">menu 1</a></li>
<li><a id="menu2" title="menu2" href="#">menu 2</a></li>
<li><a id="menu3" title="menu3" href="#">menu 3</a></li>
</ul>
</body>
Le code CSS :
a#menu1 { width: 95px; }
a#menu1:hover { background-position: -350px 0%; }
a#menu2, a#menu3 { width: 105px; }
a#menu2:hover { background-position: -445px 0%; }
a#menu3:hover { background-position: -550px 0%; }
body { background-color: #000000; }
ul li { float: left; }
ul li a { color: #FFFFFF; display: block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; height: 492px; line-height: 30px; text-decoration: none; }
ul li a:hover { background: transparent url(image.png) no-repeat top left; }
ul { background: transparent url(image.png) no-repeat; left: 250px; position: absolute; text-align: center; top: 0; width: 305px; }
ul, li { list-style: none; margin: 0; padding: 0; }
Quelques explications :
Créer une image de base :
Le principe de ce type de menu (dans mon exemple!) est d'utiliser une
seule image de fond qui se déplacera (background-position) en fonction du
lien survolé.
Il faut donc créer une image de base avec un logiciel comme Photoshop. Il
faudra "coller" côte à côte les deux images : celle de départ et celle
qui apparaîtra au survol du lien.
Plusieurs techniques sont possibles en fonction de la position et de la
forme de votre image. Menu vertical ou horizontal ...
Voici l'image du tutoriel avec les distances en pixel qui seront d'utiles repères par la suite, je vous rappelle qu'on va utiliser qu'une seule image (image.png dans le tuto):
CSS :
body {
background-color: #000000; /* couleur de fond noire : juste pour mon exemple perso */
}
ul {
background: transparent url(rollover_satoshi1.png) no-repeat; /* on place l'image de fond pour la liste non ordonnée, pas de répétition, placée par défaut en "top left" */
left: 250px; /* juste pour mon exemple : décalage de la liste de 250px du bord gauche du body */
position: absolute; /* pour pouvoir placé l'image de fond par rapport au bloc parent (ici le body) */
text-align: center; /* texte centré dans les menus */
top: 0;
width: 305px; /* par rapport à la largeur de l'image de fond */
}
ul, li {
list-style: none; /* pas de style de puce pour les éléments de la liste */
margin: 0; /* pour mettre firefox et ie d'accord !! */
padding: 0; /* pour mettre firefox et ie d'accord !! */
}
ul li {
float: left; /* les éléments sont placés en flottant à gauche */
}
ensuite on s'occupe des liens en général :
ul li a {
color: #FFFFFF; /* couleur du texte blanche pour mon exemple */
display: block; /* attention important !! les liens deviennent des blocs */
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
height: 492px; /* correspond à la hauteur de mon image, pour que le lien couvre toute la surface de l'image cf ci-dessus */
line-height: 30px; /* interlignage pour mon exemple */
text-decoration: none; /* pas de décoration par défaut des liens !! */
}
définir la largeur de chaque lien en fonction de votre image :
a#menu1 {
width: 95px; /* cf image ci-dessus
}
a#menu2, a#menu3 {
width: 105px; /* la largeur de ces deux menus est légèrement plus grande */
}
image de fond et déplacement de celle-ci au survol des liens :
ul li a:hover {
background: transparent url(rollover_satoshi1.png) no-repeat top left;
}
/* on place ici aussi toute l'image en background pour le survol de tous les liens,image positionnée par défaut en "top left" */
a#menu1:hover {
background-position: -350px 0%;
}
a#menu2:hover {
background-position: -445px 0%;
}
a#menu3:hover {
background-position: -550px 0%;
}
/* dans cet exemple, l'image doit se déplacer vers la gauche, il faut mesurer à chaque fois la distance
à partir du bord de votre premier lien. Prenez des repères !!
L'image de fond doit se décaler de toute la largeur (ou hauteur) de la première image, puis s'ajoute la distance
par rapport à chaque lien (a:hover).
Les distances ainsi trouvées doivent bien sûr être négatives.
Exemple 2: navigation verticale :
Visualisez le résultat final :
Le code xhtml :
<div id="globalnav">
<ul>
<li><a id="home" accesskey="1" title="home" href="#"><span>Home</span></a></li>
<li><a id="about" accesskey="2" title="Informations" href="#"><span>About</span></a></li>
<li><a id="links" accesskey="3" title="Liens" href="#"><span>Links</span></a></li>
<li><a id="sitemap" accesskey="4" title="Sommaire" href="#"><span>Sitemap</span></a></li>
<li><a id="download" accesskey="5" title="Téléchargements" href="#"><span>Download</span></a></li> </ul>
</div>
Le code CSS:
* {
/* zero out everything */
margin: 0;
padding: 0;
}
body {
background: #ff99ff;
}
/* global nav
*************************************************/
#globalnav {
position: absolute;
width: 215px;
top: 50px;
height: 355px;
left: 10%;
}
#globalnav span {
visibility: hidden;
}
#globalnav ul {
background: transparent url(rollover-ex2.png) no-repeat 0 0;
}
#globalnav ul li {
list-style: none;
}
#globalnav ul li a {
display: block;
height: 70px;
width: 215px;
text-decoration: none;
}
#globalnav a:hover {
/* attention, il ne faut pas écrire: #globalnav ul li a:hover */
background: transparent url(rollover-ex2.png) no-repeat 0 0;
}
a#home:hover {
background-position: 0 -355px;
}
a#about:hover {
background-position: 0 -425px;
}
a#links:hover {
background-position: 0 -495px;
}
a#sitemap:hover {
background-position: 0 -565px;
}
a#download:hover {
background-position: 0 -635px;
}
Dans le cas d'une navigation verticale, c'est logiquement plus facile car
les balises <ul> etr <li> sontpar défaut des balises de type
bloc. Ce menu fonctionne parfaitement sous IE6 et Firefox/lozilla, je ne
l'ai pas testé sur d'autres navigateurs (ni sur des versions
antérieures).
Notez que dans cet exemple 2, on rend "invisible" les écritures des menus
(utilisation de <span> conseillé), ces titres étant dans l'image
(Photoshop...).
Exemple 3: un petit dernier pour la route...
Visualisez le résultat final :
Le code xhtml :
<div id="globalnav">
<ul>
<li><a id="home" accesskey="1" title="home" href="#"><span>Home</span></a></li>
<li><a id="about" accesskey="2" title="Informations" href="#"><span>About</span></a></li>
<li><a id="links" accesskey="3" title="Liens" href="#"><span>Links</span></a></li>
<li><a id="sitemap" accesskey="4" title="Sommaire" href="#"><span>Sitemap</span></a></li>
</ul>
</div>
Le code CSS:
* {
/* zero out everything */
margin: 0;
padding: 0;
}
body {
background: #FF93FF;
}
/* global nav
*************************************************/
#globalnav {
position: absolute;
top: 50px;
left: 10%;
}
#globalnav ul,#globalnav li {
list-style: none;
}
#globalnav ul {
background: transparent url(rollover-ex-3.jpg) no-repeat 0 0;
width: 163px;
height: 200px;
text-align: center;
}
#globalnav ul li a {
display: block;
height: 50px;
width: 163px;
text-decoration: none;
line-height: 50px;
font-family: Geneva, sans-serif;
font-weight: bold;
font-size: 20px;
color: #CC0099;
}
#globalnav a:hover {
/* attention, il ne faut pas écrire #globalnav ul li a:hover */
background: transparent url(rollover-ex-3.jpg) no-repeat 0 0;
color: Black;
}
a#home:hover {
background-position: 0 -200px;
}
a#about:hover {
background-position: 0 -250px;
}
a#links:hover {
background-position: 0 -300px;
}
a#sitemap:hover {
background-position: 0 -350px;
}
Ce tutoriel est distribué sous une licence Creative Commons by-nc-sa 3.0. Consultez la page dédiée aux licences de distributions.
- Tutoriels CSS :
- 3520 lectures
Commentaires :
Poster un nouveau commentaire