Al passaggio del mouse sull'oggetto principale, appare il sottomenu, mentre quando il mouse viene ritirato il sottomenu scompare.
Esso è creato di default, nella funzione Crea chiamata dalla funzione main, ed è la sua visibilità a variare a seconda che il mouse sia o no sull'oggetto principale.
Il problema è che, se questi oggetti dovranno servire da menu, il mouseout non deve valere nel momento in cui il mouse si sposta fuori dell'oggetto principale per cadere sull'oggetto secondario.
La vedrò poi.
Ecco lo script:
<html>
<head>
<style>
#mainMenu{
position:absolute;
width:200px;
height:300px;
top:100px;
left:100px;
background-color:green;
border:10px solid brown;
}
.subMenu{
position:absolute;
width:100px;
height:100px;
top:50px;
left:20px;
background-color:cyan;
border:5px solid yellow;
}
</style>
<script>
function Posizione(obj){
var curleft=0;
var curtop=0;
do {
curleft+=obj.offsetLeft;
curtop+=obj.offsetTop;
} while(obj=obj.offsetParent);
return {X:curleft, Y:curtop};
}
function main(){
mainMenu=document.getElementById("mainMenu");
subMenu=document.getElementById("subMenu");
Crea();
mainMenu.onmouseover=function(){Mostra(nuovo)};
mainMenu.onmouseout=function(){Nascondi(nuovo)};
}
function Crea(){
nuovo=document.createElement("div");
nuovo.style.left=Posizione(mainMenu).X+mainMenu.offsetWidth;
nuovo.style.top=Posizione(mainMenu).Y+mainMenu.offsetHeight/3;
nuovo.className="subMenu";
nuovo.style.visibility="hidden";
document.body.appendChild(nuovo);
}
function Mostra(obj){
obj.style.visibility="visible";
}
function Nascondi(obj){
obj.style.visibility="hidden";
}
window.onload=main;
</script>
</head>
<body>
<div id="mainMenu">
</div>
</body>
</html>
Funziona!
