Menu contextuel rollovers en CSS

GG le sympa · #1 27-08-2006 à 21:42

Moulte littérature existe sur le sujet de réaliser des menus en CSS (l’un des plus fameux à mon sens est css.maxdesign qui propose une floppée d’exemples) mais jamais je n’ai rencontré d’exemple proposant simplement un menu de navigation avec un rollover propre à chaque élément du menu. J’entends par là, non pas comme le montre Raphael Goetter sur son site Alsacreations dans son article un menu / rollover en CSS avec une image unique mais un rollover en CSS type à l’ancienne c’est-à-dire avec une image pour chaque état “on” et une image pour chaque état “off”. Rien de révolutionnaire en soit, juste une manière simple de réaliser un menu de navigation avec des rollovers en CSS. Cet article fait suite à Préchargement d’images et est illustré par le menu que j’ai mis en place sur ce site.

Comme au bon vieux temps donc, il faut précharger les images de l’état off, voir l’exemple ou pour rappel déclarer en début de body du document html :

 <body>
 <div id="prechargement">
 <img src="/img/rubrique1_on.gif" alt=""  />
 <img src="/img/rubrique2_on.gif" alt=""  />
 <img src="/img/rubrique3_on.gif" alt=""  />
 <img src="/img/rubrique4_on.gif" alt=""  />
 <img src="/img/rubrique5_on.gif" alt=""  />
 </div>

On déclare ensuite le menu à l’endroit voulu comme suit :

 <div id="menu">
 <h1><a href="/rubrique1/" class="rub1"><span>rubrique 1</span></a></h1>
 <h1><a href="/rubrique2/" class="rub2"><span>rubrique 2</span></a></h1>
 <h1><a href="/rubrique3/" class="rub3"><span>rubrique 3</span></a></h1>
 <h1><a href="/rubrique4/" class="rub4"><span>rubrique 4</span></a></h1>
 <h1><a href="/rubrique5/" class="rub5"><span>rubrique 5</span></a></h1>
 </div>

Les balises <h1> entourent chaque rubrique afin d’avoir un code sémantiquement irréprochable, il s’agit d’un menu principal de navigation, il est donc logique d’affecter ici des balises de type <h1>.
Les <span>rubrique x</span> servent à remplacer l’image et à ainsi pouvoir être lus par un lecteur vocal par souci d’accessibilité, mais ne seront pas affichés car on aura pris soin d’indiquer dans la feuille de style :

#menu a span { display: none; }

Ensuite on prend bien soin d’affecter une classe particulière sur les balises <a> à chaque élément du menu (class=”rub1”, class=”rub2”, ...) afin de pouvoir contrôler les rollover comme il se doit via la feuille de style.
Les images pour les rollover seront affectés avec la propriété “background-image” sur les <a>. Auparavant, il faut juste affecter une taille aux balises <a> afin qu’ils correspondent à la taille de l’image :

 #menu h1 a {display: block; /* pour transformer la balise en balise de type bloc*/
 width: 106px;
 height: 16px;
 background-repeat: no-repeat;
 }

Reste à réaliser les rollover avec la feuille de style :

 a.rub1 { background-image: url(/img/rubrique1_off.gif); }
 a.rub1:hover { background-image: url(/img/rubrique1_on.gif); }
 a.rub2 { background-image: url(/img/rubrique2_off.gif); } 
 a.rub2:hover { background-image: url(/img/rubrique2_on.gif); }
 a.rub3 { background-image: url(/img/rubrique3_off.gif); }
 a.rub3:hover { background-image: url(/img/rubrique3_on.gif); }
 a.rub4 { background-image: url(/img/rubrique4_off.gif); }
 a.rub4:hover { background-image: url(/img/rubrique4_on.gif); }
 a.rub5 { background-image: url(/img/rubrique5_off.gif); }
 a.rub5:hover { background-image: url(/img/rubrique5_on.gif);}

Pour contextualiser le menu, c’est-à-dire faire en sorte que la rubrique 1 soit à l’état “on” lorsque la page dans laquelle on se trouve appartient à la rubrique 1, il faut faire appel au PHP. Dans un site dynamique en PHP, en général, les rubriques correspondent à des variables locales auxquelles on peut faire appelle en faisant :

<? echo $rubrique; ?>

Cette technique consiste à affecter à la balise <body> du document html un identifiant du nom de la rubrique dans laquelle on se trouve, c’est-à-dire obtenir la chose suivante :

<body id="rubrique1">

Il suffit donc de faire :

<body id="<? echo $rubrique; ?>">

Ceci étant fait, on ajoute dans la feuille de style :

 #rubrique1 a.rub1 { background-image: url(/img/rubrique1_on.gif); }
 /* c'est comme si nous avions body#rubrique1 a.rub1 { background-image: url(/img/rubrique1_on.gif); } */
 #rubrique2 a.rub2 { background-image: url(/img/rubrique2_on.gif); }
 #rubrique3 a.rub3 { background-image: url(/img/rubrique3_on.gif); }
 #rubrique4 a.rub4 { background-image: url(/img/rubrique4_on.gif); }
 #rubrique5 a.rub5 { background-image: url(/img/rubrique5_on.gif); }

Ainsi, lorsque nous nous trouvons sur une page appartenant à la rubrique 1 (<body id="rubrique1">), la rubrique 1 du menu est bien à l’état “on” (rubrique1 a.rub1 {background-image: url(/img/rubrique1_on.gif);}.

Contenu souscreative commons

Olivier Pretre

nomi · #2 29-03-2007 à 14:19

Salut,
merci beaucoup pour ton code, c'est tout à fait ce que je cherchais...
mais je débute en php et css et apparement j'ai pas tout compris...

sur le site, j'ai 3 menu dont 2 avec des images qui chargent les pages php dédiées dans une "main" au milieu..

bon y'a plusieur trucs que j'ai pas trop pigé :

1) est -il possi ble d'utilisé ton menu sans texte, e m'explique, quand j'ai essayé la première fois j'avais laissé le texte et en effet le fond de l'image était la bonne mais ne respectait pas du tout les dimensions de mon image.
Hors ce qui m'interesse c'est juste l'image, à dimension fixe.
J'ai d'abord attriué les attribus widht et height à< h1>puis j'ai fini par le remplacer par une nouvelle balise bouton mais bon c'est nul ça change rien...

2) L'histoire du "contextuel" ça tombe bien mais alors je ne vois vraiment pas dans quelles pages mettre les 3 bout de codes que tu donne:

<? echo $rubrique; ?>

body id="rubrique1">

<body id="<? echo $rubrique; ?>">

Bon je me suis dit qu'il ne fallait pas tous les utilisés mais voilà , j'ai rien compris...

Ben si jamais t'as l'occasion de me répondre c'est trés sympa de ta part, je suis sur un site moche qui me prends la tete mais j'ai quand meme envie de faire ça bien...

merci bonne journée

nomi · #3 29-03-2007 à 14:38

bon en fait,
le premier probleme est réglé c'était une faute d'inattention, reste le 2éme, et cette histoire de préchargement ...
il faut rendre la balise préchargement invisible mais je ne sais pas comment?...

http://www.nomitruk.com/casadarno/novo

nomi · #4 29-03-2007 à 15:09

bon c'est réglé, désolée d'avoir innondée ta boite...
comme quoi meme une blonde peut réfléchir des fois

GG le sympa · #5 29-03-2007 à 15:17

Salut
Même pas eut le temps de répondre, content que ton problème soit résolu.
Ps : c'est pas moi qui ai écrit cet article c'est Oliver Pretre.

#1 27-08-2006 à 21:42

Re : Menu contextuel rollovers en CSS

#2 29-03-2007 à 14:19

Re : Menu contextuel rollovers en CSS

#3 29-03-2007 à 14:38

Re : Menu contextuel rollovers en CSS

#4 29-03-2007 à 15:09

Re : Menu contextuel rollovers en CSS

#5 29-03-2007 à 15:17

Re : Menu contextuel rollovers en CSS

Réponse rapide

Pied de page des forums