Menu avec images réactives

Bonjour à tous,

Jusqu'à présent, j'utilise assez souvent la méthode dites 'des portes coulissantes' pour effectuer un rollover dans un menu.

Ce procédé est intéressant pour la simple action rollover.

Cependant, est-il possible, au lieu d'utiliser une image à deux étages d'en créer une avec trois étages? permettant ainsi d'utiliser le dernier étage lorsque la page appelée par le menu est activée.

Ce qui sous entend également, que lorsque je change de page, celle nouvellement appelée activera le troisième étage du menu actionné. (repositionnant l'ancien menu à sa position initiale sur son premier étage).

upload/11807-btn.gif" alt="upload/11807-btn.gifupload/11807-btn.gif" />

Pour poursuivre l'explication de ma demande vis-à-vis de ceux qui ne seraient pas ce qu'est 'les portes coulissantes'.

Sur la base de la même image ci-dessous (cliquer sur le lien):
upload/11807-btn.gif" alt="upload/11807-btn.gifupload/11807-btn.gif" />

Bien...

J'ai un menu horizontal composé de 2 menus que je gère avec une page *.css
Dans ma page html j'inscris le code suivant:
<td width="100%" height="30">
<ul id="menu">
<li><a href="#">btn_1</a></li>
<li><a href="#">btn_2</a></li>
</ul>
</td>

Je défini mon css comme suit:
ul#menu { margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
list-style-type: none;
border: 0;}

ul#menu li {float: left;
margin: 0;
padding:0;}

ul#menu li a {display: block;
width: 114px;
line-height: 30px;
border:0;
color:orange;
text-decoration: none;
padding-left: 26px;
background-image: url(bt.gif);
background-repeat: no-repeat;}

ul#menu li a:hover { color: #767676;
background-image: url(bt.gif);
background-repeat: no-repeat;
background-position: 0 -30px;}

Dans la position normal:
Mes deux menus ont pour dimension 114x30px et sont espacés de 26px.
L'image (background) est positionnée à son premier étage.

Lorsque la souris passe dessus l'un d'eux, l'image (background) se positionne alors sur le deuxième étage; ceci, grâce à l'écriture "background-position: 0 -30px;"

Voilà ce qu'est le dit 'portes coulissante'

Mon image btn.gif est de 114x90px (composé de ses trois étages).

Ma question est donc:

Puis-je utiliser le css pour gérer la partie (troisième étage) lorsque ma page html appelée est active.
Par la même occasion, est-il possible lorsque j'appel une autre page que le menu activé se repositionne sur la première image tout en laissant la main à mon deuxième menu maintenant actif ?

Si ma question n'est pas assez claire veuillez me le faire savoir.

En tout les cas merci pour ce forum au combien pratique pour des personnes tels que moi qui affectionnent l'usage du CSS.

Merci encore,

A+

Bonjour,

Il n'y a bien entendu aucun problème à élargir cette méthode à d'autres fonctionnalités, notamment un état "actif" du menu.

Tu peux t'aider de valeurs en pourcentages pour positionner plus facilement ton fond suivant les différents états:

li a {background-position:0 0}
li a:hover {background-position:0 50%}
li strong {background-position:0 100%}

Merci Benjamin D.C.,

Est-ce à dire que mon btn_2 désactivera le 'strong' du btn_1 ?

Bonjour Benjamin,

J'ai utilisé ta suggestion. Effectivement lorsque je clic sur un menu, le troisième étage apparait.
Cependant, il ne reste pas afficher une fois que je relâche la souris.

Voici mon objectif:

J'active menu 1 (accueil) pour afficher la page d'accueil. Est-ce que ce menu peut alors faire apparaitre le troisième étage de btn.gif, me signalant ainsi que je suis en train de visualiser la page d'accueil.
J'active maintenant le menu 2 (contact) pour afficher la page contenant le formulaire de messagerie. Est-ce que ce menu peut alors faire apparaitre le troisième étage de btn.gif, me signalant ainsi que je suis en train de visualiser la page contact. dans ce cas, Est-ce que menu 1 (accueil) se repositionne sur le premier étage de btn.gif ?

En tout les cas merci pour ton aide au combien pratique.

Merci encore,

A+

Salut.

En fait tu es obligé de signaler manuellement quelle page est active. C'est ce que Benjamin propose de faire avec un strong.

Donc par exemple dans ta page presentation.html, la ligne presentation du menu sera entouré de strong. Et ainsi de suite dans chaque page.

Et dans ta page css, il faut placer la définition du strong après celle a pour qu'il le surclasse.

[EDIT] Il y a souvent confusion avec la pseudo-classe :active. Il s'agit de l'état du bouton au moment de l'action, donc du clic. A ne pas confondre avec la page en cours, qui comme je l'ai dit, ne peut pas être devinée par le navigateur (mis à part en php..). C'est pour ça qu'il faut utiliser un strong ou une classe.
Modifié par <nicolas> (09 Apr 2007 - 23:29)

Bonjour Nicolas,

Merci pour tes explications.
Cependant, je ne comprend pas son usage dans le code html et css; du moins pour atteindre mon objectif.
A priori, le a: active {} réagi au niveau du clic; mais j'avoue ne pas saisir le comportement du strong.

Pourrais-tu s'il te plait m'aiguiller plus succinctement.

Merci d'avance.

A+

Salut,

Mjnet :
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Salut,

Pour la question de la page active, un petit tour dans la FAQ ?
Modifié par Mikachu (10 Apr 2007 - 01:02)

Oups !!

Mille excuses Mikachu

Je vis éditer ci dessous mon code comme vous le préconisez.

Merci pour votre intervention.

A+

Suite au rappel de Mikachu, je réédite mon code ci-après:

Encore 1000 excuses !!
___________________

Sur la base de l'image ci-dessous (cliquer sur le lien):
img previews/11807-btn.gif" alt="upload/11807-btn.gif img previews/11807-btn.gif" />

J'ai un menu horizontal composé de 2 menus que je gère avec une page *.css
Dans ma page html j'inscris le code suivant:

<td width="100%" height="30">
<ul id="menu">
<li><a href="#">btn_1</a></li>
<li><a href="#">btn_2</a></li>
</ul>
</td>

Je défini mon css comme suit:

ul#menu { margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
list-style-type:none;
border: 0;}

ul#menu li {float: left;
margin: 0;
padding:0;}

ul#menu li a {display: block;
width:114px;
line-height:30px;
border:0;
color:orange;
text-decoration:none;
padding-left:26px;
background-image:url(bt.gif);
background-repeat:no-repeat;}

ul#menu li a:hover { color:#767676;
background-image:url(bt.gif);
background-repeat:no-repeat;
background-position:0 -30px;}

Dans la position normal:
Mes deux menus ont pour dimension 114x30px et sont espacés de 26px.
L'image (background) est positionnée à son premier étage.

Lorsque la souris passe dessus l'un d'eux, l'image (background) se positionne alors sur le deuxième étage; ceci, grâce à l'écriture "background-position:0 -30px;"


Merci encore,

A+

Je parlais d'éditer ton second message, pas de copier coller dans une nouveau message

Bonjour,

Si ton site est statique (sans php) un exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css"> 
#conteneur {
	width: 420px;
	height:50px;
	background-color: lime;
	margin: auto;
	border: 1px solid black;
}

ul#menu { margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
list-style-type:none;
border: 0;
}

ul#menu li {
float: left;
margin: 0;
padding:0;
}

ul#menu li a {
display: block;
width:114px;
line-height:30px;
border:0;
color:orange;
text-decoration:none;
padding-left:26px;
background: yellow;
}

ul#menu li a:hover { 
color:#767676;
background: red;
}

ul#menu li a#actif { 
color:#fff;
background: blue;
}
  </style>
 
</head>

<div id="conteneur">
	<ul id="menu">
		<li><a href="#" id="actif">Item actif</a></li>
		<li><a href="#">btn_2</a></li>
		<li><a href="#">btn_3</a></li>
	</ul>
</div>
</body>
</html>

Sinon en php, c'est la même méthode de base, sauf que l'on gère l'affichage de la classe active par une variable définie avant l'include du menu.