Bonjour,
j'ai un menu en JS qui fonctionne bien sous Firefox, mais lorsque je passe sous IE le menu deroulant bug, c'est a dire que à sa gauche et sa droite, du blanc se deroule également. Voici le lien http://www.ironiqstudio.com qui vaut mille explications
Un bout du menu en html
un bout du menu en css
et le javascript
Si quelqu'un a une idée, je lui en serais très reconnaissant..
Merci d'avance
Modifié par defsquier (07 Nov 2006 - 16:40)
j'ai un menu en JS qui fonctionne bien sous Firefox, mais lorsque je passe sous IE le menu deroulant bug, c'est a dire que à sa gauche et sa droite, du blanc se deroule également. Voici le lien http://www.ironiqstudio.com qui vaut mille explications
Un bout du menu en html
<dl class="menu">
<dt><a id="troisd" href="index.php?page=3d_presentation"></a></dt>
<dd>
<ul>
<li><a href="index.php?page=3d_presentation">Présentation</a></li>
<li><a href="index.php?page=3d_temps_reel">Temps réel</a></li>
<li><a href="index.php?page=3d_rendus_precalcules">Rendus</a></li>
<li><a href="index.php?page=3d_archi_interieur">Archi d'intérieur</a></li>
</ul>
</dd>
</dl>
un bout du menu en css
/*Menus*/
dl.menu, dl.menu dt, dl.menu dd, dl.menu dd ul, dl.menu dd ul li
{
margin: 0px;
padding: 0px;
}
dl.menu
{
float: left;
width: 133px;
cursor: pointer;
}
dl.menu dt
{
width:133px;
height:32px;
display:block;
}
dl.menu dd ul
{
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
width: 133px;
margin: 0px auto;
list-style-type: none;
background: #b0becb;
font-size: 11px;
}
dl.menu dd ul li:hover
{
background: #72748d;
color:#ffffff;
font-size: 11px;
}
dl.menu dd ul li a
{
text-decoration: none;
color: #ffffff;
padding-left: 5px;
font-size: 11px;
}
dl.menu dd ul li a:hover
{
color: #ffffff;
background: #72748d;
padding-left: 5px;
font-size: 11px;
}
dl.menu a#troisd
{
display: block ;
width: 133px ;
height:32px;
background: url(/boutons/3d.jpg) no-repeat 0 0 ;
float:left;
}
dl.menu a#troisd:hover{background: url(/boutons/3d.jpg) no-repeat 0 -32px ;}
dl.menu a#troisd:active{background: url(/boutons/3d.jpg) no-repeat 0 -64px ;}
et le javascript
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;
Si quelqu'un a une idée, je lui en serais très reconnaissant..
Merci d'avance
Modifié par defsquier (07 Nov 2006 - 16:40)
