2/2 #Rollover – Comment faire un menu rollover en CSS

Publié par Arnaud le 20 mai 2009 dans Développement, Réalisations

C’est à la suite d’une visite sur le site d’Apple que je suis tombé sur leur barre de menu (très réussi, au passage). Par curiosité, j’ai affiché l’image de fond et je suis tombé sur ça :

Menu Rollover Apple

Une image qui réunit les différents « états » (classique, survol, clic) du menu. Ca ma donné une idée de tuto pour créer des menus rollover en CSS. L’intérêt de celui-ci, c’est qu’il ne fait pas appel au javascript et qu’il sera donc affiché sur tous les navigateurs.

¤ Etape 1 : Préparer le terrain

On commence par lier notre feuille de style avec notre page HTML grâce à la balise :

<link rel="stylesheet" type="text/css" href="./style.css">

Ensuite, on va ajouter un conteneur pour notre menu. Celui-ci sera tous simplement un div :

	<!--Début du conteneur menu -->
<div class="menu">
</div>
<!--Fin du conteneur menu-->

Dans notre feuille de style, on va initialiser les marges et centrer notre conteneur :

BODY{
margin:10px;
padding:10px;
}
p,ul,a{
margin:0px;
padding:0px;
}
.menu{
width:982px;
margin:0 auto 0 auto; /* Pour centrer horizontalement notre menu */
height:36px;
border:1px solid black; /* Pour vérifier le centrage */
}

Avec tous cela, on a maintenant une page avec un div centré et à la bonne dimension.
¤ Live démo de l’étape 1 là : http://www.arnaudbosquet.fr/tutos/css/etape1/

¤ Etape 2 : Mettre en place le menu

On va maintenant placer les différentes catégories du menu à l’aide de la balise <a>et leur attribuer une classe css. Notre code HTML ressemble à ça :

<div class="menu">
	<a class="m_accueil"></a>
	<a class="m_store"></a>
	<a class="m_mac"></a>
	<a class="m_ipod"></a>
	<a class="m_iphone"></a>
	<a class="m_telec"></a>
	<a class="m_support"></a>
	<a class="m_search"></a>
</div>

Tout le travail va être fait dans notre feuille de style. Pour chaque élément, on va placer l’image en background. L’attribut float:left, va quant à lui, nous permettre d’avoir les div sur une seule ligne. On simplifiera notre feuille de style plus tard. Et voici le travail :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
height:37px;
float:left;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
height:37px;
float:left;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
height:37px;
float:left;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
height:37px;
float:left;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
height:37px;
float:left;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
height:37px;
float:left;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
height:37px;
float:left;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
height:37px;
float:left;
}

Nos catégories sont placées, le menu est presque prêt, sauf qu’il est statique
¤ Live démo de l’étape 2 là : http://www.arnaudbosquet.fr/tutos/css/etape2/

¤ Etape 3 : Animation du menu

Ajoutons un peu de vie à ce menu. Pour cela, tout va se passer dans notre css. Grâce aux propriétés :hover et :active, on va pouvoir définir un style pour le survol ou le clique. Dans notre cas, le style sera le même mis à part le décalage sur la hauteur du background.
On va aussi simplifier notre css grâce à l’héritage. En effet, toutes nos catégories sont définies par des balises <a> et celles-ci sont à l’intérieur du div qui a la classe menu.

.menu a{
height:37px;
float:left;
}

Le bout de code ci-dessus va permettre d’attribuer ces mêmes propriétés pour toutes les balises <a> contenu dans le div qui a la classe menu.

Notre feuille de style complète et finie :

.menu{
width:982px;
margin:0 auto 0 auto;
height:36px;
/*border:1px solid black;*/
}
.menu a{
height:37px;
float:left;
}
.m_accueil{
background:url('./menu.png') no-repeat 0px 0px;
width:118px;
}
.m_accueil:hover{
background:url('./menu.png') no-repeat 0px -38px;
}
.m_accueil:active{
background:url('./menu.png') no-repeat 0px -76px;
}
.m_store{
background:url('./menu.png') no-repeat -118px 0px;
width:117px;
}
.m_store:hover{
background:url('./menu.png') no-repeat -118px -38px;
}
.m_store:active{
background:url('./menu.png') no-repeat -118px -76px;
}
.m_mac{
background:url('./menu.png') no-repeat -235px 0px;
width:117px;
}
.m_mac:hover{
background:url('./menu.png') no-repeat -235px -38px;
}
.m_mac:active{
background:url('./menu.png') no-repeat -235px -76px;
}
.m_ipod{
background:url('./menu.png') no-repeat -352px 0px;
width:117px;
}
.m_ipod:hover{
background:url('./menu.png') no-repeat -352px -38px;
}
.m_ipod:active{
background:url('./menu.png') no-repeat -352px -76px;
}
.m_iphone{
background:url('./menu.png') no-repeat -469px 0px;
width:117px;
}
.m_iphone:hover{
background:url('./menu.png') no-repeat -469px -38px;
}
.m_iphone:active{
background:url('./menu.png') no-repeat -469px -76px;
}
.m_telec{
background:url('./menu.png') no-repeat -586px 0px;
width:117px;
}
.m_telec:hover{
background:url('./menu.png') no-repeat -586px -38px;
}
.m_telec:active{
background:url('./menu.png') no-repeat -586px -76px;
}
.m_support{
background:url('./menu.png') no-repeat -703px 0px;
width:117px;
}
.m_support:hover{
background:url('./menu.png') no-repeat -703px -38px;
}
.m_support:active{
background:url('./menu.png') no-repeat -703px -76px;
}
.m_search{
background:url('./menu.png') no-repeat -820px 0px;
width:161px;
}

Pour ajouter des liens sur nos catégories, il suffit d’utiliser la propriété href comme ci-dessous :

	<a class="m_accueil" href="#"></a>

¤ Live démo du menu rollover en css c’est là : http://www.arnaudbosquet.fr/tutos/css/etape3/

A vous de jouer

12 commentaires

beulou

5 juin 2009 à 16:41

le css livré a l’étape 3 ne correspond pas à l’exemple fourni.
Lorsque je test ton exemple je m’aperçois que au passage de la souris, le texte devient blanc ce qui n’est a aucun moment indiqué dans ton css.
De plus tu as utilisé une police particulière non indiqué non plus.
pourrais tu me donner de plus amples informations car le résultat obtenu m’intéresse

Arnaud

5 juin 2009 à 17:05

Les CSS que je montre sont exactement celles des exemples.
Tu dis que le texte devient blanc et que j’utilise une police particulièrement mais tous ces éléments font, en fait, partis d’une seule et même image que je montre au début de l’article et que tu peux retrouver ici : http://www.arnaudbosquet.fr/wp-content/uploads/2009/05/menu.png

La css va ensuite déplacer l’image sur la hauteur en fonction des états (survol,…).

C’est plus clair avec ces explications ?

beulou

7 juin 2009 à 11:14

Je n’avais pas vu que tu utilisé cette methode ^^! je suis un boulet ^^!
dans ce cas tout est plus clair effectivement!!!

Arnaud

8 juin 2009 à 20:26

Si on peut être utile ^^

beulou

10 juin 2009 à 16:51

Par contre, la dernière ligne de l’image ne sert a rien non??? enfin je sais a quoi elle sert mais elle n’est pas utilisée ici me semble il

Arnaud

10 juin 2009 à 23:06

Oui, cette ligne, n’est pas utilisée car elle correspond à l’état du bouton lorsque c’est la page en cours.
Or, ici, le but était juste de faire un rollover en css. Maintenant, avec quelques lignes de php ou même de javascript, c’est faisable

beulou

11 juin 2009 à 8:49

Oui oui je sais ^^!
le rollover fonctionne par ailleurs très bien je me suis déjà un peu amusé à le modifier avec photoshop ^^! Cela s’adapte vraiment bien et c’est plutôt simple a utiliser!!
Merci en tout cas

Arnaud

17 juin 2009 à 9:49

Y’a pas de quoi
C’est vrai que c’est ultra simple à faire et à utiliser.

nico

3 sept 2009 à 11:09

c’est excellent ! et super bien expliqué ! merci

Arnaud

4 sept 2009 à 9:09

Content que ça plaise

Je suis entrain de rédiger un article dans le même acabit pour faire une genre de barre de notification à la Facebook. Une barre toujours en bas, haut dessus de tout, avec des notifications sous forme de bulle.

Un truc sympa quoi

lew

3 nov 2009 à 13:59

Merci énormément pour cette méthode très clean que je cherchais depuis un moment pour mon blog ! C’est parfait et très facile à mettre en place !
Je n’ai pas utilisé le « active » dans le CSS mais c’est peut être bien quand même (pour plus tard).