Salve a tutti. Sono andato sul link: http://javascript.html.it/articoli/l...tale-in-dhtml/
Li si può trovare il seguente codice per la creazione di un menu' dinamico orizzontale:
-------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu orizzontale dinamico in Dhtml</title>
<script language="javascript">
var quanti = 3; // Imposta il numero di menu e di sottomenu
var i;
// Il parametro "conta" serve per indicizzare i vai menu principali
function Apri(conta)
{
if(document.all) // Identifichiamo Microsoft Internet Explorer
{
var elemento = event.toElement;
var mostra = document.all.sottomenu[conta];
// Rende visibile il sottomenu relativo al menu principale al cui evento si scatena la routine
mostra.style.visibility = "visible"; // Visualizza i sottomenu
mostra.style.top = 15; // Stabilisce la distanza dei sottomenu dal bordo superiore
// Ciclando la variabile "i" che fa da contatore
// possiamo identificare il sottomenu relativo al menu di appartenenza
for (i=0; i<quanti; i++)
{
aperto = document.all.sottomenu[i];
menu = document.all.principale[i];
// Se il mouse esce dall'area del sottomenu di appartenenza
// per passare su un altro menu, chiudiamo il relativo sottomenu
if (i != conta)
{
aperto.style.visibility = "hidden";
}
}
}
}
// Con la stessa filosofia impostiamo lo stile "nascosto" sul sottomenu aperto
function Chiudi()
{
for (i=0; i<quanti; i++)
{
if (document.all)
{
document.all.sottomenu[i].style.visibility = "hidden";
menu = document.all.principale[i];
}
}
}
</script>
</head>
<body>
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
MENU # 1
MENU # 2
MENU # 3
</div>
<div style="position: Absolute; width: 100%; height: 20%;" onMouseOver="Chiudi()"></div>
<div id="sottomenu" style="left: 1px;">
Pagina # 1
Pagina # 2
Pagina # 3
</div>
<div id="sottomenu" style="left: 69px;">
Pagina # 4
Pagina # 5
Pagina # 6
</div>
<div id="sottomenu" style="left: 138px;">
Pagina # 7
Pagina # 8
Pagina # 9
</div>
</body>
</html>
-----------------------------------------------------------------------
Tuttavia il codice non mi sembra corretto perchè non produce i risultati voluti.
Intanto a me non sembra che i sottomenu e i menu principali possano essere chiamati con lo stesso nome. Mi sapreste dare una mano?
Poi se do nomi differenti ai menu e sottomenu la pagina (il cui script a questo punto ovviamente non funziona), mi produce il seguente output:
----------------------------------------------------------------
MENU # 1 MENU # 2 MENU # 3
Pagina # 1
Pagina # 2
Pagina # 3
Pagina # 4
Pagina # 5
Pagina # 6
Pagina # 7
Pagina # 8
Pagina #9
Cioè mi mette i sottomenu uno sotto all'altro senza rispettare i differenti left.
Chi mi darebbe una mano?

Rispondi quotando