Menu dynamique CSS + Javascript

Bonjour à tous,
Grâce au tuto d'Alsacréations, je suis tombé sur le menu dynamique proposé ici : http://dosimple.ch/articles/Menus-dynamiques/menuVertical.html . Cependant, il y a un aspect que j'aimerais changer, mais je ne sais pas comment. Quand on passe sur un sous menu, le menu parent se grise, pour afficher une sorte de traçabilité. (cela correspond à la classe a.linkOver). Cependant, lorsque l'on sort complètement du menu (que les sous-menus disparaissent), le menu parent reste grisé. Comment faire pour que le menu parent redevienne de la même couleur que les autres liens dès que les sous-menu ne sont plus affichés ? (Le fonctionnement du menu est visible dans le lien précédent).

Je présume qu'il s'agit ici plus de javascript que de css.

D'avance merci pour vos réponses
Modifié par le_fleau (10 Jul 2007 - 23:52)

Personne n'aurait une idée ?
D'avance merci

Salut, je te remercie de ta réponse, mais par exemple. Le problème avec "onMouseOut", c'est que dès que l'on va aller sur un sous menu, la cellule parente va redevenir de la couleur normale. Or il faudrait que la couleur "grisée" reste jusqu'à ce qu'on sorte du sous menu (le menu enfant de la cellule).

Justement tu mets l'action sur le sous menu ( le menu enfant de la cellule).

Au pire tu rajoutes une variable qui quand la souris quitte tout les menus, elle le degrise.

Salut, merci pour ta réponse. N'étant pas très calé en javascript, j'ai essayé ceci : j'ai mis un id pour chaque lien (<a id="x1"> etc) pour chaque élément de la liste parente. J'ai mis un onmouseover sur chaque <ul> correspondant à un sous menu, se rapportant à l'id du lien parent (<ul onmouseover="mpstyle('x1')" ). Et j'ai donc créé le javascript suivant pour la fonction mpstyle

function pmstyle(id)
{
document.getElementById(id).className="menu_normal";
}

Ca fonctionne, merci beaucoup

Maintenant, malheureusement, il faudrait compliquer un peu. Dans mon menu j'ai également certains liens qui ne donnent pas lieu à des sous menus.
Comment faire pour que lorsqu'un lien est survolé, un autre lien du menu ne soit pas grisé ? Comment faire pour que tous les liens soient dans la classe "menu_normal" lorsque l'utilisateur n'est plus dedans ?

D'avance merci pour vos réponses
Modifié par le_fleau (11 Jul 2007 - 17:01)

Coucou,
Desoler je n'ai pas tout compris car moi j'utilise maintenant un systeme similaire.

Le code javascript qui est appeler par le menu et les sous menus.

<script language="JavaScript" type="text/javascript">
		<!--
		function show(menu,ssmenu) {
			document.getElementById(menu).style.padding="5px";
			document.getElementById(menu).style.backgroundColor="#EF4B00";
			document.getElementById(ssmenu).style.visibility = "visible";
		}
		function hidden(menu,ssmenu) {
			document.getElementById(menu).style.padding="0px";
			document.getElementById(menu).style.backgroundColor="#019444";
			document.getElementById(ssmenu).style.visibility = "hidden";
		}
		-->
	</script>

La page du menu ( je n'utilise pas les listes peut etre que je changerai.)

<div id="menulien">
				<a id="creation" href="./index.php?page=creation" onFocus="show('creation','ssmenu1');" onMouseOver="show('creation','ssmenu1');" onMouseOut="hidden('creation','ssmenu1')">
					Création d'article</a>
				<a id="maj" href="./index.php?page=maj" onFocus="show('maj','ssmenu2');" onMouseOver="show('maj','ssmenu2');" onMouseOut="hidden('maj','ssmenu2')">
					Mise à jours</a>
				<a id="compte" href="./index.php?page=compte">
					Création de compte</a>
				</div>
				
				<!--Sous menu du site, chaque catégorie possede sa parti.-->
				<div class="ssmenu" id="ssmenu1" onMouseOver="show('creation','ssmenu1');" onMouseOut="hidden('creation','ssmenu1')">
				<a href="competence.html">
					Articles</a>
				<a href="fonctionnement.html">
					Professionnels</a>
				<a href="installation.html">
					Actualités</a>
				<a href="index.php?page=recrutement">
					Recrutement</a>
				</div>
				<div class="ssmenu" id="ssmenu2" onMouseOver="show('maj','ssmenu2');" onMouseOut="hidden('maj','ssmenu2')">
				<a href="competence.html">
					Articles</a>
				<a href="fonctionnement.html">
					Professionnels</a>
				<a href="installation.html">
					Actualités</a>
				<a href="index.php?page=recrutement">
					Recrutement</a>
				<a href="index.php?page=recrutement">
					Mise à jours</a>
				</div>

Je ne sais pas si cela peut t'arranger...

Ou sinon explique un peu plus

ps: pour le onfocus c'etait un test pour l'accessibilité, que je fais sans doute ajouter partout, mais faut rajouter le contraire bien sur