Che ne dite di questo che ho fatto?
JAVASCRIPT:
codice:
var quanti = 3; // Imposta il numero di menu e di sottomenu
var i;
var timerID;
function apri(conta)
{
clearInterval(timerID);
var mostra = document.getElementById("sottomenu"+conta);
var aperto;
mostra.style.visibility = "visible"; // Visualizza i sottomenu
for (i=0; i<quanti; i++)
{
if (i != conta)
{
aperto=document.getElementById("sottomenu"+i);
aperto.style.visibility = "hidden";
}
}
}
function chiudiTimer()
{
timerID=setInterval('chiudi()',200);
}
function chiudi()
{
clearInterval(timerID);
for (i=0; i<quanti; i++)
{
document.getElementById("sottomenu"+i).style.visibility = "hidden";
}
}
html:
codice:
<div style="margin-top:30px; position:relative;" >
MENU #1 |
MENU #2 |
MENU #3
<div onmouseover="clearInterval(timerID);" onmouseout="chiudiTimer();" id="sottomenu0" style="position:absolute; visibility:hidden; width:120px; background-color:#666666; color:#FFFFFF; left: 0px; top: 20px; ">
<ul>
[*]sotto1
[*]sotto2
[*]sotto3
[/list]
</div>
<div onmouseover="clearInterval(timerID);" onmouseout="chiudiTimer();" id="sottomenu1" style="position:absolute; visibility:hidden; width:120px; background-color:#666666; color:#FFFFFF; left: 72px; top: 20px;">
<ul>
[*]sotto1
[*]sotto2
[*]sotto3
[/list]
</div>
<div onmouseover="clearInterval(timerID);" onmouseout="chiudiTimer();" id="sottomenu2" style="position:absolute; visibility:hidden; width:120px; background-color:#666666; color:#FFFFFF; left: 149px; top: 20px;">
<ul>
[*]sotto1
[*]sotto2
[*]sotto3
[/list]
</div>
</div>
potrebbe andare come cosa o ci sono metodi migliori per farli?