11548 sujets

JavaScript, DOM et API Web HTML5

Menu horizontal double et délai en JS

Bonjour,

Je suis en train de construire un menu dynamique de style horizontal double, avec donc les titres de premiers niveaux sur la première rangée et les sous-titres sur la seconde. Avec des rollovers CSS je peux gérer sans problème l'affichage/masquage des sous-menus.

Mais il y a un problème avec l'approche pure CSS : dès que la souris quitte la zone de titre, le sous-menu correspondant redevient caché. Ce n'est pas très grave avec un menu déroulant vertical, mais ça devient un vrai parcours du combattant de ne pas sortir de la zone de :hover avec un menu horizontal de 25px de haut...

Il faudrait donc laisser un petit délai avant que le sous-menu ne redevienne caché... J'ai trouvé ça pour un menu du même genre : http://forum.alsacreations.com/topic.php?fid=5&tid=9315&s=d%E9lai+rollover
...après avoir essayé de l'adapter à mon cas, ça ne fonctionne toujours pas.

La subtilité supplémentaire est que j'utilise une classe .selected pour la catégorie active, catégorie dont les sous-menus seront toujours "visibles" quand rien d'autre n'est sélectionné.

On peut voir le site à http://cavoon.com/ez/ pour vous faire une idée du menu

Côté code, c'est du 

<div class="menu">
  <ul>  
    <li><a href="Main1">Main1</a>
      <ul>
        <li><a  href="Sub1">Sub1</a></li>
	<li><a  href="Sub2">Sub2</a></li>			
      </ul>
    </li>
    <li class="selected"><a href="Main2">Main2</a>
      <ul>
        <li><a  href="Sub1">Sub1</a></li>
	<li><a  href="Sub2">Sub2</a></li>			
      </ul>
    </li>					
  </ul>
</div>


Savez-vous comment je pourrai scripter ça ?
peux-tu poster ton code Js ?
Je pense que tu doit avoir un souci sur ton evenement hover à voir...
J'ai testé 2 méthodes venant de ce site :


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';}
}

function waitncache(id) {
setTimeout("cacher(id)",1000)
}

function cacher(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='block';}
	}
if (d) {d.style.display='none';}
}


Le code d'origine contient un window.onload=montre; mais comme je l'ai dit je souhaite que les sous-menus de la catégorie active soient affichés au chargement de la page. J'avais ajouté à mes liens principaux : onmouseover="montre()" et onmouseout="waitncache()", et mes sous-menus (<ul>) avaient des id allant de smenu1 à smenu5.

Sinon j'ai également essayé :
dynMenu = function(idMenu,delai) {
tempo=0;
dls = document.getElementById(idMenu).getElementsByTagName("li");
for(var i=0;i<dls.length;i++){
	dls[i].onmouseover=function(){
		clearTimeout(tempo);
		encours=this;
		tempo=setTimeout("chgClass()",delai)
		}
  }
menu.onmouseover=function(){
clearTimeout(tempo);
tempo=setTimeout("chgClass()",delai)
}
}

function chgClass(){
	for(var j=0;j<dls.length;j++) //cache tout
		dls[j].className=dls[j].className.replace(/ montre|montre|montre /,"");
		encours.className+=!encours.className?"montre":" montre"; //montre le sous-menu
}

dynMenu("menu",200)
[/i]
Modifié par MilkaJinka (27 Aug 2008 - 15:55)
Sujet clos
Aller à