[Résolu] Menu horizontal déroulant de Raphaël

Bonjour gens du forum.

Raphaël nous offre ici un simple et léger menu déroulant sur une ligne horizontale (merci à lui).

Un extrait du code :

<div id="menu">
	<dl>
		<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-menu 1.1</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
				</ul>

			</dd>
	</dl></div>

Mon intention serait de placer un background au survol de menu1. Pas bien compliqué :

dl dt a:hover {
background-color:red;
}

Mais, dès que je sors du survol du "dt" pour aller survoler le sous-menu je perds mon background. Et comme le "dd" qui contient le sous-menu n'est pas contenu par le "dt"... je sèche.

Y a-t-il un moyen astucieux de conserver l'affichage du background du "dt" même lors du survol des "dd" sans passer par javascript et qui fonctionnerait sur tous les derniers navigateurs ?

Merci à vous et bonne journée !
Modifié par Philos (22 Nov 2007 - 15:23)

Apparement, pas de solution côté Css.

Je vais aller voir du côté de javascript alors.

Je ne mets pas Résolu pour le moment, j'éditerai la solution trouvée.

Bonsoir Philos,


Je ne suis pas sûr de bien appréhender ton problème, mais avec le code suivant, tu obtiens le même fond sur sur dt et dd au survol :

#menu dt a:hover, #menu dd a:hover  {
background-color:red;
}

Que ce soit avec une couleur de fond ou une image

Sinon merci de repréciser ta demande

Merci pour ton aide

Oui, mais ce que je vise n'est pas d'obtenir le même fond, mais d'afficher un fond quand je survole le dt et de le garder afficher (ce fond sur le dt) même quand je le quitte (le survol du dt) pour aller sur le sous-menu (contenu dans le dd).

Le dt contient le lien (menu de niveau 1) qui déclenche (dans le cas du menu de Raphaël) l'affichage du sous-menu de niveau 2 (un ul et ses li contenus dans le dd).

Or, pour aller sur le sous-menu (le dd) je dois quitter le survol du dt (le menu) et du coup le a:hover disparait.

Comment permettre au fond de demeurer sur le dt même lorsqu'on en quitte le survol ?

Est-ce plus clair vu comme ça ?

Merci quoi qu'il en soit.

Oui c'est beaucoup plus clair ( enfin pour moi qui suis assez lent )

Avec :

#menu dt.A a:visited{
background-color:red;
}
#menu dt.A a:hover{
background-color:red;
}
#menu dt.A a:active{
background-color:red;
}
#menu dd.A a:hover  {
background-color:red;
}

Et en rajoutant :

<div id="menu">
	<dl>
		<dt [#blue]class="A"[/#] onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1"[#blue]class="A"[/#]>
				<ul>
					<li><a href="#">Sous-menu 1.1</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
				</ul>
			</dd>
	</dl>

Tu devrais avoir quelque chose d'approchant
Toutefois, le menu étant prévu pour être survolé, seul le clic sur "menu1" provoquera l'état "visited" qui te permetrait de "garder le background" induit par le "hover"...
Tu peux également définir ce background "menu1" dès l'ouverture de la page ce qui simplifie les choses ( pas besoin du "hover", du "active"...)
Bref, tu fais comme tu veux, ton imagination est ton seul frein
Modifié par 6l20 (21 Nov 2007 - 21:10)

Merci à toi pour cette suggestion.

Effectivement, cette solution implique de cliquer le menu de niveau 1 pour passer de l'état hover à celui d'active.

Définir le background dés l'ouverture ne fonctionne pas si j'ai plusieurs menus de niveau 1 (cf menu de Raphaël).

Et j'aurai bien aimé le même résultat mais sans devoir cliquer pour passer en active.

Il n'y aurait pas moyen de figer l'état hover grace à javascript ? (quand tu dis que mon imagination est mon seul frein, ma trop faible connaissance de js aussi ) ?

Merci.

Philos a écrit :
Définir le background dés l'ouverture ne fonctionne pas si j'ai plusieurs menus de niveau 1 (cf menu de Raphaël).

Pourtant, c'est possible :

#menu dt#A a{
background-color:red;
}
#menu dd.A a:hover  {
background-color:red;
}
#menu dt#B a{
background-color:blue;
}
#menu dd.B a:hover  {
background-color:blue;
}
#menu dt#C a{
background-color:green;
}
#menu dd.C a:hover  {
background-color:green;
}

<div id="menu">
	<dl>
		<dt id="A" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1"class="A">
				<ul>
					<li><a href="#">Sous-menu 1.1</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>			
		<dt id="B"onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2"class="B">
				<ul>
					<li><a href="#">Sous-menu 2.1</a></li>
					<li><a href="#">Sous-menu 2.2</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt id="C" onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
			<dd id="smenu3"class="C">
				<ul>
					<li><a href="#">Sous-menu 3.1</a></li>
					<li><a href="#">Sous-menu 3.2</a></li>
					<li><a href="#">Sous-menu 3.3</a></li>
					<li><a href="#">Sous-menu 3.4</a></li>
					<li><a href="#">Sous-menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-menu 4.1</a></li>
					<li><a href="#">Sous-menu 4.2</a></li>
					<li><a href="#">Sous-menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
</div>

Philos a écrit :
Il n'y aurait pas moyen de figer l'état hover grace à javascript ? (quand tu dis que mon imagination est mon seul frein, ma trop faible connaissance de js aussi ) ?
Merci.

A ma connaissance, cela n'est pas possible en css, effectivement peut-être du coté javascript (ou ma connaissance du sujet rejoint grandement la tienne ), mais ne serait-ce pas "too much" pour un menu ?

Bon courage pour la suite

6l20 a écrit :

A ma connaissance, cela n'est pas possible en css, effectivement peut-être du coté javascript (ou ma connaissance du sujet rejoint grandement la tienne ), mais ne serait-ce pas "too much" pour un menu ?

Bon courage pour la suite

Ca, c'est le difficile débat client/prestataire. Si j'avais le choix il est clair que j'adopterai quelque chose de plus simple... mais le client... lui il tient à son effet.

Merci en tout cas pour ton attention et ton aide, j'apprécie beaucoup

Je suis parti sur une piste parallèle, en remplaçant la liste de définitions par une liste non ordonnée (le souci du dl c'est que les dt ne contiennent pas les dd), plus un csshover.htc (afin de gérer les hover sur les li) et le javascript proposé par Raphaël pour afficher masquer le tout.

Ca marche bien partout sauf sous Opéra, donc étape suivante, comprendre pourquoi Opéra est vilain avec moi

J'édite mon message pour le passer en Résolu même si finalement c'est pas totalement le cas.

Bonne fin de journée.
Modifié par Philos (22 Nov 2007 - 15:22)