codice:
<html>
<head>
<title>MENU SCOMPARSA</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#over{
background:red;
}
body{
background:black;
}
.button{
background:grey;
color:white;
height:40px;
width:150px;
}
#tasto1{
position:absolute;
top:100px;
left:20px;
}
#tasto2{
position:absolute;
top:143px;
left:20px;
}
#tasto3{
position:absolute;
top:186px;
left:20px;
}
#blocco1{
position:absolute;
background:white;
color:grey;
z-index:99;
left:170px;
top:100px;
height:126px;
width:150px;
}
#blocco2{
position:absolute;
background:white;
color:grey;
z-index:99;
left:170px;
top:143px;
height:126px;
width:150px;
}
#blocco3{
position:absolute;
background:white;
color:grey;
z-index:99;
left:170px;
top:186px;
height:126px;
width:150px;
}
#blocco4{
position:absolute;
background:black;
z-index:100;
left:170px;
top:100px;
height:212px;
width:150px;
}
</style>
<script type="text/javascript">
function cambia_indice(boxup,box2,box3,button1, button2, button3){
document.getElementById(boxup).style.zIndex="101";
document.getElementById(box2).style.zIndex="99";
document.getElementById(box3).style.zIndex="99";
document.getElementById(button1).style.background="white";
document.getElementById(button1).style.color="grey";
document.getElementById(button2).style.background="grey";
document.getElementById(button2).style.color="white";
document.getElementById(button3).style.background="grey";
document.getElementById(button3).style.color="white";
}
function mantieni(button){
document.getElementById(button).style.background="white";
document.getElementById(button).style.color="grey";
}
function blackover(box1,box2,box3){
document.getElementById(box1).style.zIndex="99";
document.getElementById(box2).style.zIndex="99";
document.getElementById(box3).style.zIndex="99";
}
function ritorna(button){
document.getElementById(button).style.background="grey";
document.getElementById(button).style.color="white";
}
</script>
</head>
<body>
<div OnMouseOut="blackover('blocco1','blocco2','blocco3');">
<div id="tasto1" class="button" onMouseOver="cambia_indice('blocco1','blocco2','blocco3','tasto1','tasto2','tasto3');"> LINK1</div>
<div id="tasto2" class="button" onMouseOver="cambia_indice('blocco2','blocco1','blocco3','tasto2','tasto1','tasto3');"> LINK2</div>
<div id="tasto3" class="button" onMouseOver="cambia_indice('blocco3','blocco2','blocco1','tasto3','tasto1','tasto2');"> LINK3</div>
<div id="blocco1" onMouseOver="mantieni('tasto1'),cambia_indice('blocco1','blocco2','blocco3','tasto1','tasto2','tasto3');" OnMouseOut="ritorna('tasto1'),blackover('blocco1','blocco2','blocco3');">MENU1
MENU2
MENU3</div>
<div id="blocco2" onMouseOver="mantieni('tasto2'),cambia_indice('blocco2','blocco1','blocco3','tasto2','tasto1','tasto3');" OnMouseOut="ritorna('tasto2'),blackover('blocco1','blocco2','blocco3');">MENU11
MENU21
MENU3</div>
<div id="blocco3" onMouseOver="mantieni('tasto3'),cambia_indice('blocco3','blocco2','blocco1','tasto3','tasto2','tasto1');" OnMouseOut="ritorna('tasto3'),blackover('blocco1','blocco2','blocco3');">MENU11
MENU21
MENU3</div>
<div id="blocco4"></div>
</div>
</body>
</html>
da poco mi sono avvicinato a questo linguaggio, se fate partire questa pagine visualizzerete l'effetto che desidero effettivamente ottenere.. la mia domanda è: esiste una strada più corta?