Problème avec un menu mootools sous IE

Hello, j'ai programmé un menu avec mootools.
Sous FF, ça marche très bien, mais sous IE j'ai des erreurs et le menu ne fonctionne pas du tout.
J'ai mis un message sur le forum de mootools (http://forum.mootools.net/viewtopic.php?pid=31344#post-31344), et j'ai essayé d'avoir un peu d'aide sur l'IRC mais ils sont pas très bavards...

Si quelqu'un pouvait regarder mon script, ce serait vraiment, vraiment cool...
Toutes les infos (URL du site et script) sur le site de mootools.
Modifié par gordie (27 Oct 2007 - 18:27)

gordie a écrit :

Toutes les infos (URL du site et script) sur le site de mootools.

Hello
Si t'es référenceur chez Motools, t'aurais dû mettre un lien direct vers le site
Sinon si tu veux de l'aide ici t'aurais du mettre ton url de test et ton script dans ton post

ça peut s'arranger...
http://tinyurl.com/3xujh4

a écrit :
<script type="text/javascript" language="JavaScript">
<!--
window.addEvent('domready', function(){

$('lang_1').addClass('current default'); $('menu2_item5a').addClass('current'); //RUB5 ML
$('quick_ml').addClass('current default'); //pour le quicklink menu

var menu_colors = ['#ff6600', '#cc0000', '#8b008b', '#330098', '#3366ff'];

//HIGHLIGHTS quicklink
$$('#quicklinks li').each(function(element) {
var fx = new Fx.Styles(element, {duration:200, wait:false});

if (element.hasClass('current')) {
element.setStyle('backgroundColor', '#FFF');
}

element.addEvents({
'mouseenter': function(){

if (!element.hasClass('current')) { //si l'objet qu'on survole n'est pas le current
$$('#quicklinks li.current').each(function(element) { //on resete le current
var fx2 = new Fx.Styles(element, {duration:200, wait:false});
element.removeClass('current');
fx2.start({'margin-bottom': 0, 'background-color': '#CCC' });
});
//on met celui-ci en current
element.addClass('current');
fx.start({'margin-bottom': 5, 'background-color': '#FFF' });
}

},
'mouseleave': function(){
element.removeClass('current');
fx.start({'margin-bottom': 0, 'background-color': '#CCC' });
}
});

});
$('quicklinks').addEvent('mouseleave', function(){ //revenir au d&#65533;fault
$$('#quicklinks li').each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

if (!element.hasClass('default')) {
if (element.hasClass('current')) {
fx.start({'margin-bottom': 0, 'background-color': '#CCC' });
element.removeClass('current');
}
} else {
element.addClass('current');
fx.start({'margin-bottom': 5, 'background-color': '#FFF' });
}
})
});
//FIN HIGHLIGHTS quicklink


////on affiche le menu par d&#65533;faut
$$('#menu2 li.current').each(function(element) {

var id = element.id.replace('menu2_item', '').toInt();
var onglet = $('menu1_item' + id);
var rubcolor = menu_colors[id - 1];

element.getParent().getParent().setOpacity(1);
element.getParent().getParent().addClass('default current');
onglet.addClass('default current');
onglet.setStyle('backgroundColor', rubcolor);
});


$$('#menu1 div').each(function(element) {
var id = element.id.replace('menu1_item', '').toInt();
var submenu = $('menu2_item' + id);
var rubcolor = menu_colors[id - 1];

var fx1 = new Fx.Styles(element, {duration:200, wait:false});
var fx2 = new Fx.Styles(submenu, {duration:200, wait:false});

element.addEvents({



'mouseenter': function(){

//si on a cr&#65533;&#65533; une classe current (voir plus bas), on invisibilise le bouton
$$('#menu2 div.current').each(function(element) { // we iterate through each submenu with the class current
var id = element.id.replace('menu2_item', '').toInt();
var onglet = $('menu1_item' + id);
var fx3 = new Fx.Styles(onglet, {duration:200, wait:false});
fx3.start({'background-color': '#000'}); //...on vire la couleur de l'onglet current

var fx4 = new Fx.Styles(element, {duration:200, wait:false});

fx4.start({'opacity': 0}); //...we make the submenu invisible.

//onglet.removeClass('current'); //...we delete the class
element.removeClass('current'); //...we delete the class





});

fx1.start({'margin-bottom': 5, 'background-color': rubcolor });
fx2.start({'opacity': 1});
submenu.addClass('current'); //we give the current item a CLASS.

},
'mouseleave': function(){
fx1.start({'margin-bottom': 0});
}

});
});

$('menu').addEvent('mouseleave', function(){

$$('#menu2 div').each(function(element) { //when we leave the WHOLE menu (#menu2), the current item disapear too.
var id = element.id.replace('menu2_item', '').toInt();
var onglet = $('menu1_item' + id);
var rubcolor = menu_colors[id - 1];


var fx2 = new Fx.Styles(element, {duration:200, wait:false});
var fx3 = new Fx.Styles(onglet, {duration:200, wait:false});


if (!element.hasClass('default')) {
if (element.hasClass('current')) {
fx2.start({'opacity': 0});
fx3.start({'background-color': '#000'}); //...on vire la couleur de l'onglet default
element.removeClass('current');
}
} else {
var default_alpha = element.getStyle('opacity').toInt();
if (default_alpha !=1) {
fx2.start({'opacity': 1});
element.addClass('current');

fx3.start({'background-color': rubcolor}); //...on affiche la couleur de l'onglet default


}
}
})


})



});
//-->
</script>

si c'est le menu du haut (Folioscope etc...) qui doit s'animer
mauvaise nouvelle
ça ne fonctionne pas non plus sous FF et Safari Mac osX
donne un lien vers la page d'exemple peut être mais je garantie pas que je pourrais t'aider vu la complexité du javascript
sinon, il y a un très bon tuto sur le site d'alsacreations pour un menu déroulant accessible même pour ceux qui auraient désactivé javascript

Ok, je suis reparti de celui-là pour faire un nouveau menu... Merci !