Bon je n'arrive pas à place le timeout je pense que je fais une erreur de code.
Voici ce que j'ai fait.
Je rappelle le code js :
var drawerMenu = {
inc : 5,
elements : new Array,
timers : new Array,
construct : function()
{
var dls = document.getElementsByTagName('dl');
var n = 0;
for(var i = 0; i < dls.length; i++)
{
if(dls[ i].className == 'menu')
{
n++;
drawerMenu.timers[n] = 0;
dls[ i].onmouseover = drawerMenu.triggerShow;
dls[ i].onmouseout = drawerMenu.triggerHide;
dls[ i].targetElement = n;
for(var j = 0; j < dls[ i].childNodes.length; j++)
{
if(dls[ i].childNodes[j].nodeType == 1)
{
if(dls[ i].childNodes[j].tagName == 'DD')
{
dls[ i].childNodes[j].style.position = 'relative';
dls[ i].childNodes[j].style.overflow = 'hidden';
dls[ i].childNodes[j].style.height = '0px';
for(var k = 0; k < dls[ i].childNodes[j].childNodes.length; k++)
{
if(dls[ i].childNodes[j].childNodes[k].nodeType == 1)
{
if(dls[ i].childNodes[j].childNodes[k].tagName == 'UL')
{
drawerMenu.elements[n] = dls[ i].childNodes[j].childNodes[k];
dls[ i].childNodes[j].childNodes[k].style.position = 'absolute';
dls[ i].childNodes[j].childNodes[k].style.top = '-'+dls[ i].childNodes[j].childNodes[k].offsetHeight+'px';
}
}
}
}
}
}
}
}
},
triggerShow : function()
{
if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.show('+this.targetElement+')', 20);
},
triggerHide : function()
{
if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.hide('+this.targetElement+')', 20);
},
show : function(i)
{
var ul = drawerMenu.elements[ i];
var t = parseInt(ul.style.top);
var inx = Math.ceil(-t/drawerMenu.inc);
if(t+inx < 0)
{
ul.style.top = (t+inx) +'px';
ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';
}
else if(t < 0)
{
ul.style.top = '0px';
ul.parentNode.style.height = ul.offsetHeight + 'px';
}
else
{
clearInterval(drawerMenu.timers[ i]);
drawerMenu.timers[ i] = 0;
}
},
hide : function(i)
{
var ul = drawerMenu.elements[ i];
var t = parseInt(ul.style.top);
var inx = Math.ceil(t/drawerMenu.inc);
if(inx == 0) inx = -1;
if(t+inx > -ul.offsetHeight)
{
ul.style.top = (t+inx) +'px';
ul.parentNode.style.height = (ul.offsetHeight+t+inx) + 'px';
}
else if(t > -ul.offsetHeight)
{
ul.style.top = -ul.offsetHeight + 'px';
ul.parentNode.style.height = '0px';
}
else
{
clearInterval(drawerMenu.timers[ i]);
drawerMenu.timers[ i] = 0;
}
}
}
window.onload = drawerMenu.construct;
Dans la fonction construct j'ai supprimé
dls[ i].onmouseout = drawerMenu.triggerHide;
pour éviter que le menu ne se referme quand la souris n'est plus dessus, ça marche.
Ensuite j'ai fait passer la fonction triggerHide avant la fonction triggerShow (je ne sais pas si ça a de l'importance l'ordre en js, mais je suppose que oui), et j'ai ajouté le setTimeout dans la fonction triggerShow de la manière suivante :
triggerShow : function()
{
if(drawerMenu.timers[this.targetElement]) clearInterval(drawerMenu.timers[this.targetElement]);
drawerMenu.timers[this.targetElement] = setInterval('drawerMenu.show('+this.targetElement+')', 20);
setTimeout('triggerHide()', 1000);
},
et lorsque je charge ma page, quand je passe la souris sur le menu il s'ouvre bien, par contre il ne se referme pas. J'ai du manquer quelque chose...
Edit : j'ai farfouillé sur Internet et peut être trouvé une alternative : le flash transparent. Seulement aux dernière nouvelles ça ne passe pas trop sous FF. Vous en pensez quoi ?
Modifié par ricotrutt (29 Dec 2006 - 15:14)
