Salve a tutti,
vi allego il codice che sto preparando e che non riesco a far funzionare.
Dovrebbe rappresentare un classico menu a tendina che si apre quando il mouse ci passa sopra, e si chiude quando il mouse esce dalla tendina o dal pulsante soprastante che lo ha generato.
Purtroppo non riesco a far rimanere aperta la tendina, il punto critico nel codice è segnalato da un commento. Come risolvo questo problema?
Sto sviluppando il menu su Chrome e Explorer e la visualizzazione è leggermente diversa: la differenza è accettabile ma sarebbe meglio se fossero identici. Sugli altri browser si hanno problemi di compatibilità?
Grazie per eventuali risposte.
codice:<html> <head> <style type='text/css'> body{ margin:0px; } .menu{ background-color:black; width:100%; padding:5px; } .menu-parent{ background-color:#555; padding:5px; width:150px; display:inline-block; text-align:center; } .menu-child{ background-color:#aaa; padding:5px; position:absolute; display:none; top:-500px; } </style> <script language='Javascript'> function setMenuChildren(){ var parentCounter=0; while(document.getElementById('menu-parent-'+(++parentCounter))!=undefined){ if(document.getElementById('menu-child-'+(parentCounter))!=undefined){ var child = document.getElementById('menu-child-'+(parentCounter)); var parent= document.getElementById('menu-parent-'+(parentCounter)); child.mouseIsOver=false; child.onmouseover = function(){ this.mouseIsOver = true; } child.onmouseout = function(){ this.mouseIsOver = false; this.style.display="none"; } parent.onmouseover = function(){ showChild(this); } parent.onmouseout = function(){ hideChild(this); } child.style.top =parent.offsetTop +parent.offsetHeight; child.style.left=parent.offsetLeft; if(child.offsetWidth<parent.offsetWidth) child.style.width=parent.offsetWidth; } } } function showChild(elem){ id=parseInt(elem.id.match(/\d+/)); if(document.getElementById('menu-child-'+id)!=undefined){ document.getElementById('menu-child-'+id).style.display="inline"; } } function hideChild(elem){ id=parseInt(elem.id.match(/\d+/)); /////////// il seguente controllo non sembra funzionare correttamente////////////// if(document.getElementById('menu-child-'+id)!=undefined){ if(!(document.getElementById('menu-child-'+id).mouseIsOver)){ document.getElementById('menu-child-'+id).style.display="none"; } } } </script> </head> <body onload='setMenuChildren()'> <div class='menu'> <span class='menu-parent' id='menu-parent-1'>parent</span> <span class='menu-parent' id='menu-parent-2'>parent 2</span> <span class='menu-parent' id='menu-parent-3'>parent</span> </div> <div class='menu-child' id='menu-child-2'>a b c d e</div> <div class='menu-child' id='menu-child-3'>a b c</div> </body> </html>
Rispondi quotando
