F.A.Q. numero 322.
Come posso creare menù dinamici per IE4+ NN4+ Mozilla/N6+?
L'esempio che segue, uno script completo praticamente, prevede che le voci vengano scritte direttamente nel documento, lo script si occupa solo di attivarle.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
//--fabiano@jsdir.com--
//--http://www.jsdir.com--
//--http://www.jsdir.com/faq/faq.asp?espandi=mostra&numero=322
//----------------------------
function col(id,colore)
{
if (document.all)
document.all[id].style.backgroundColor=colore;
else
if (document.layers)
{
document.layers[id].clip.height="20";
document.layers[id].clip.width="150";
document.layers[id].bgColor=colore;
}
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=colore;
}
//--------------------------------------------------------------------------
var ax=0;
var ay=0;
if (document.getElementById && (navigator.appName=="Netscape") || document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=move;
}
else
if (document.all || (document.getElementById && (navigator.appName=="Microsoft Internet Explorer")))
document.onmousemove=move;
function move(e)
{
if (document.all || (document.getElementById && (navigator.appName=="Microsoft Internet Explorer")))
ax=window.event.clientX, ay=window.event.clientY;
else if (document.getElementById && (navigator.appName=="Netscape") || document.layers)
ax=e.pageX, ay=e.pageY;
//---------------------mostra/nasconde menu--------------------------
livelli=new Array();
livelli[0]="due";
livelli[1]="tre";
livelli[2]="quattro";
livelli[3]="cinque";
if ((ax>10 && ax<175) && (ay>53 && ay<77))
{
for(i=0; i<livelli.length; i++)
{
dv=livelli[i];
if (document.all)
{
document.all['uno'].style.backgroundColor="#ff99ff";
document.all[dv].style.visibility="visible";
}
else
if (document.layers)
{
document.layers['uno'].bgColor="#ff99ff";
document.layers[dv].visibility="visible";
}
else
if (document.getElementById)
{
document.getElementById('uno').style.backgroundColor="#ff99ff";
document.getElementById(dv).style.visibility="visible";
}
col(dv,'#6373b5');
}
}
else
if ((ax<10 || ax>325) || (ay<53 || ay>197))
{
for(i=0; i<livelli.length; i++)
{
dv=livelli[i];
if (document.all)
{
document.all['uno'].style.backgroundColor="#9999ff";
document.all[dv].style.visibility="hidden";
}
else
if(document.layers)
{
document.layers['uno'].bgColor="#9999ff";
document.layers[dv].visibility="hidden";
}
else
if (document.getElementById)
{
document.getElementById('uno').style.backgroundColor="#9999ff";
document.getElementById(dv).style.visibility="hidden";
}
}
}
//--------------------nasconde sottomenu -----------------------
sott=new Array();
sott[0]="unobis";
sott[1]="duebis";
sott[2]="trebis";
if ((ax<10 || ax>325) || (ay<110 || ay>170) || (ax<150 && ay>130))
{
for (i=0; i<sott.length; i++)
{
dvs=sott[i];
if (document.all)
document.all[dvs].style.visibility="hidden";
else
if (document.layers)
document.layers[dvs].visibility="hidden";
else
if (document.getElementById)
document.getElementById(dvs).style.visibility="hidden";
}
}
//------------------
sott2=new Array();
sott2[0]="unobis2";
sott2[1]="duebis2";
sott2[2]="trebis2";
if ((ax<10 || ax>325) || (ay<130 || ay>170) || (ax<170 && ay>150))
{
for (i=0; i<sott2.length; i++)
{
dvs2=sott2[i];
if (document.all)
document.all[dvs2].style.visibility="hidden";
else
if (document.layers)
document.layers[dvs2].visibility="hidden";
else
if (document.getElementById)
document.getElementById(dvs2).style.visibility="hidden";
}
}
}
//------------------------mostra menu onmouseover-------------------
function mostra(quale)
{
if (document.all)
document.all[quale].style.visibility="visible";
else
if(document.layers)
document.layers[quale].visibility="visible";
else
if (document.getElementById)
document.getElementById(quale).style.visibility="visible";
col(quale,'#6373b5');
}
</SCRIPT>
</HEAD>
<BODY onLoad="col('uno','#9999ff');">
<DIV ID="uno" STYLE="position:absolute; border:solid gray 1px; top:50; left:10;height:20; width:150; "> Menu 1 </div>
<DIV ID="cinque" STYLE="position:absolute; border:solid gray 1px; top:130; left:10;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('cinque','#bdc6de');mostra('unobis2');mostra('duebis2');mostra('trebis2')" onMouseOut="col('cinque','#6373b5')">Riferimento 4</A>
</DIV>
<DIV ID="unobis" STYLE="position:absolute; border:solid gray 1px; top:110; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('unobis','#bdc6de')" onMouseOut="col('unobis','#6373b5')">Riferimento 1</A>
</DIV>
<DIV ID="duebis" STYLE="position:absolute; border:solid gray 1px; top:130; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('duebis','#bdc6de')" onMouseOut="col('duebis','#6373b5')">Riferimento 2</A>
</DIV>
<DIV ID="trebis" STYLE="position:absolute; border:solid gray 1px; top:150; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('trebis','#bdc6de')" onMouseOut="col('trebis','#6373b5')">Riferimento 3</A>
</DIV>
<DIV ID="unobis2" STYLE="position:absolute; border:solid gray 1px; top:130; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('unobis2','#bdc6de')" onMouseOut="col('unobis2','#6373b5')">Riferimento 4</A>
</DIV>
<DIV ID="duebis2" STYLE="position:absolute; border:solid gray 1px; top:150; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('duebis2','#bdc6de')" onMouseOut="col('duebis2','#6373b5')">Riferimento 5</A>
</DIV>
<DIV ID="trebis2" STYLE="position:absolute; border:solid gray 1px; top:170; left:160;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('trebis2','#bdc6de')" onMouseOut="col('trebis2','#6373b5')">Riferimento 6</A>
</div>
<DIV ID="due" STYLE="position:absolute; border:solid gray 1px; top:70; left:10;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('due','#bdc6de')" onMouseOut="col('due','#6373b5')">Riferimento 1</A>
</DIV>
<DIV ID="tre" STYLE="position:absolute; border:solid gray 1px; top:90; left:10;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('tre','#bdc6de')" onMouseOut="col('tre','#6373b5')">Riferimento 2</A>
</DIV>
<DIV ID="quattro" STYLE="position:absolute; border:solid gray 1px; top:110; left:10;height:20; width:150; visibility:hidden; ">
<A HREF="#" onMouseOver="col('quattro','#bdc6de');mostra('unobis');mostra('duebis');mostra('trebis')" onMouseOut="col('quattro','#6373b5')">Riferimento 3</A>
</DIV>
</BODY>
</HTML>
| 
Stampa
Segnala 
Preferiti 
