11521 sujets

JavaScript, DOM et API Web HTML5

Survol menu déroulant

Bonjour à toutes et à tous.
Un petit problème à vous soumettre:
J'ai un menu déroulant qui se déplie lorsqu'on le survole. L'ennui c'est que une fois le curseur descendu plus loin dans la page, le menu survolé reste déplié tant qu'on n'a pas quitté ou rechargé la page.
Y a-t-il une possibilité pour que le menu se replie une fois survolé?
Voici le menu ainsi que le javascript correspondant.
Merci d'avance pour vos conseils avisés.

Le menu:
	<dl>			
		<dt onMouseOver="javascript:montre('smenu2');">Le site</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Historique</a></li>
					<li><a href="#">Caractéristiques</a></li>
					<li><a href="#">Les produits</a></li>
				</ul>
			</dd>
	</dl>


Le javascript:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
Modérateur
Salut,

onmouseover déclenche une action quand le curseur passe sur un élément mais pas quand il en sort : https://www.w3schools.com/jsref/event_onmouseover.asp

Pour déclencher une autre action à la sortie du curseur c'est onmouseout : https://www.w3schools.com/jsref/event_onmouseout.asp

Par contre je te propose une facon plus propre de faire ça via addEventListener() : https://www.w3schools.com/js/js_htmldom_eventlistener.asp

dans ton HTML tu ne met pas de fonction Js, juste un ID sur l'élément que tu veut animer au survol : 
<dt id="menuderoulant">Le site</dt>

et dans le Js tu suis la spec de addEventListener :

document.getElementById("menuderoulant").addEventListener("mouseover", mouseOverMenu);
document.getElementById("menuderoulant").addEventListener("mouseout", mouseOutMenu);
function mouseOverMenu() {
  document.getElementById("menuderoulant").style.color = "red";
}
function mouseOutMenu() {
  document.getElementById("menuderoulant").style.color = "black";
}


Bonne journée


[EDIT] Correction de l'erreur soulevée par Mathieuu
Modifié par _laurent (03 Mar 2020 - 12:01)
Salut,

sinon tu peux jouer avec du css et la propriété hover.
Principe : Par défaut tu caches les dd, ensuite tant que tu survoles un dt tu fais apparaître le dd suivant, et tu le laisses apparaitre tant que tu survoles le dd qui est apparu


dd{
  display:none;
}

dd:hover, dt:hover+dd{
  display:table;
}


En exemple : https://jsfiddle.net/wL9qh5re/
J'ai rajouter des couleurs de fonds pour que l'on voit à quel moment se déclenche le hover. A voir ensuite pour le menu si c'est mieux en block sur toute la ligne ou juste en table pour limiter au contenu.
Modérateur
Mathieuu a écrit :
du css et la propriété hover.

Ah bah oui je suis con... j'avais la tête dans le Js à cause de la question... En plus en répondant je trouvais que quelque-chose clochait parce-que je trouvais plus le addEventListener("hover") dans les spec Smiley biggol Allez je vais reprendre un café hein ! Merci de veiller au grain Mathieuu
C'est juste que j'ai tendance à me pencher d'abord du coté html+css uniquement, puis si ce n'est pas possible (ou vraiment trop compliqué) de partir vers du javascsript. Vu que la la solution en css n'est pas trop compliqué, je propose l'alternative

Et ensuite pour ton code, je ne l'ai pas testé mais j'ai l'impression qu'il faut remplacer le 2e mouseover par mouseout

_laurent a écrit :

document.getElementById("menuderoulant").addEventListener("mouseover", mouseOutMenu);




document.getElementById("menuderoulant").addEventListener("mouseout", mouseOutMenu);

Modifié par Mathieuu (03 Mar 2020 - 11:12)
Modérateur
Mathieuu a écrit :
C'est juste que j'ai tendance à me pencher d'abord du coté html+css uniquement, puis si ce n'est pas possible (ou vraiment trop compliqué) de partir vers du javascsript.

Tout à fait... C'est ce que je fais aussi (normalement Smiley bawling )

Mathieuu a écrit :
Et ensuite pour ton code, je ne l'ai pas testé mais j'ai l'impression qu'il faut remplacer le 2e mouseover par mouseout

Tout à fait aussi... j'ai changé le nom de la fonction mais j'ai oublié de changer le nom de l'event Smiley sweatdrop
Sujet clos
Aller à