Premessa
In questo articolo analizzeremo il modo in cui è possibile realizzare un menu orizzontale dinamico. Costruiremo, per intenderci, un menu sullo stile delle applicazioni Windows: i noti menu File - Modifica - Visualizza - ecc.... Un esempio è subito disponibile per la vostra curiosità, mentre un file compresso contiene tutti e tre i file che andremo a commentare.
Premetto che lo scopo finale non è quello di fornire lo script "bello e pronto da servire in tavola", ma solo di imparare a ragionare sulla tecnica che si utilizza per realizzare una simile "applicazione". il menu in questione, infatti, è compatibile solo con Microsoft Internet Explorer 5.0 e versioni superiori. Alla fine dell'articolo mostrerò anche la funzione "tradotta" per Netscape Navigator.
Non mi sono preoccupato di fornire al menu particolari stilizzazioni, è comunque sufficiente una discreta conoscenza dei Fogli di stile per renderlo più aggraziato ed accattivante.
Concettualizzazione del problema
La realizzazione del menu in questione prevede l'utilizzo di codice HTML per creare le voci principali (sempre visibili) e le voci dei sottomenu (inizialmente nascoste, visibili solo al passaggio del mouse sulla rispettiva voce principale).
Grazie al codice CSS possiamo lavorare sulla visibilità dei sottomenu e sul loro posizionamento all'interno della pagina (nonché sull'estetica dell'intero menu, cosa che conto sarà vostra cura fare).
Ovviamente dinamizzeremo l'applicazione con JavaScript. Per maggior chiarezza e comodità divideremo lo script in tre distinti file:
- Il file menu.htm è il file di output su cui costruiremo fisicamente il menu. In questo stesso file includeremo i richiami ai file esterni per permettere di effettuare eventuali modifiche, sia stilistiche che funzionali, agendo una sola volta.
- Il file menu.css si preoccupa di impostare lo stile generico degli elementi HTML del menu, nonchè di collaborare con JavaScript per far fronte alle funzionalità pratiche.
- Il file menu.js contiene il codice standard per il funzionamento del menu.
Costruzione fisica del menu: il file menu.htm
Creiamo un nuovo file HTML e salviamolo come menu.htm; inseriamo tra i tag <head> e </head> i richiami verso i file CSS e JavaScript, le cui funzionalità sono state descritte nel paragrafo precedente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">
<head>
<title>Menu orizzontale dinamico in Dhtml</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<script type="text/javascript" type="text/javascript" src="menu.js"></script>
</head>
...
Costruiamo adesso la struttura fisica delle voci principali del menu:
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
<a href="javascript:void(0)" onMouseOver="Apri(0)" id="principale">MENU # 1</a> |
<a href="javascript:void(0)" onMouseOver="Apri(1)" id="principale">MENU # 2</a> |
<a href="javascript:void(0)" onMouseOver="Apri(2)" id="principale">MENU # 3</a>
</div>
Impostiamo un layer di tipo <div> con una qualsiasi stilizzazione (potete assegnargli una classe, è lo stesso) in cui inseriamo i link rappresentanti le voci principali del menu; ad ognuno di questi assegniamo un identificativo di tipo id con valore principale: questo identificativo ci servirà in seguito quando analizzeremo lo script; all'evento mouse-over lanciamo la funzione Apri() con un incremento numerico come parametro.
È importante sottolineare che l'esempio di menu in questione prevede necessariamente un layout di pagina posizionato staticamente sul margine sinistro della pagina. È inoltre opportuno impostare la distanza dal margine superiore e dal margine sinistro della pagina a zero (0) pixel: in funzione di eventuali modifiche di questi valori, bisognerà modificare le distanze ed il posizionamento degli elementi HTML nei codici CSS e JavaScript, onde rendere il tutto uniforme.
Supponiamo quindi, per praticità, che i margini di tutte le pagine che conterranno il menu siano impostati a zero (0) pixel:
...
<body topmargin="0" leftmargin="0">
...
In un qualsiasi punto della pagina dobbiamo inserire un altro layer di tipo <div> posizionato dinamicamente, al cui evento mouse-over deve corrispondere al funzione Chiudi() che esamineremo in seguito; ecco il codice:
<div style="position: Absolute; width: 100%; height: 20%;" onMouseOver="Chiudi()"> </div>
Costruiamo adesso i sottomenu:
<!-- MENU # 1 -->
<div id="sottomenu" style="left: 1px;">
<a href="pagina1.html">Pagina # 1</a><br>
<a href="pagina2.html">Pagina # 2</a><br>
<a href="pagina3.html">Pagina # 3</a><br>
</div>
<!-- MENU # 2 -->
<div id="sottomenu" style="left: 69px;">
<a href="pagina4.html">Pagina # 4</a><br>
<a href="pagina5.html">Pagina # 5</a><br>
<a href="pagina6.html">Pagina # 6</a><br>
</div>
<!-- MENU # 3 -->
<div id="sottomenu" style="left: 138px;">
<a href="pagina7.html">Pagina # 7</a><br>
<a href="pagina8.html">Pagina # 8</a><br>
<a href="pagina9.html">Pagina # 9</a><br>
</div>
Ad ognuno dei layer assegnamo l'identificatore sottomenu ed uno stile univoco, in cui andiamo a specificare la distanza dal margine sinistro della pagina, in modo da cadere esattamente sotto la propria voce principale.
Passiamo ora alla definizione del file CSS necessario per il corretto funzionamento del menu.
Il foglio di stile CSS: il file menu.css
Il foglio di stile CSS che andiamo ad utilizzare per il nostro menu è molto semplice, ma alcuni punti sono fondamentali per il suo corretto funzionamento; analizziamo il codice:
div {
font-size: 11px;
font-family: Verdana;
}
#principale {
color: #000000;
text-decoration: None;
}
#sottomenu {
position: Absolute;
visibility: Hidden;
width: 120px;
padding: 1px;
border: Solid 1px #000000;
}
La stilizzazione del tag <div> è in qualche modo indipendente dal codice CSS necessario per la stilizzazione dinamica del menu; tuttavia è necessario stabilire delle dimensioni ed un carattere standard, onde poter stabilire misure e distanze per l'accorpamento dei vari elementi HTML del menu.
La classe ID #principale si limita a stilizzare i link del menu principale, ovvero le voci di menu al cui passaggio del mouse si attiva il relativo sottomenu.
La classe ID #sottomenu, invece, è necessaria per il posizionamento assoluto dei sottomenu e per impostarli nascosti al caricamento, quindi, le istruzioni veramente necessarie per compiere tali operazioni sono solo quelle segnate in neretto nel codice seguente:
#sottomenu {
position: Absolute;
visibility: Hidden;
width: 120px;
padding: 1px;
border: Solid 1px #000000;
}
Il resto è del tutto personalizzabile ed ampliabile.
Dinamizzazione JavaScript: il file menu.js
Come già accennato nelle prime righe dell'articolo, andiamo ad analizzare nello specifico le istruzioni necessarie per il funzionamento del menu con Microsoft Internet Explorer; in seguito analizzeremo la "traduzione" valida per Netscape Navigator.
Il codice completo e commentato è riportato di seguito:
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 = 14; // 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];
}
}
}
I commenti al codice appena presentato lasciano poco spazio ad ulteriori commenti, le routine sono semplici e formattate in maniera chiara e leggibile, ma funziona solo con Microsoft Internet Explorer; come predetto, nel prossimo paragrafo integreremo le routine appena presentate con le funzioni valide per Netscape Navigator.
Traduzione dello script valida per Netscape Navigator
La routine di seguito presentata va integrata nella funzione Apri(), utile per l'apertura del menu
if (document.layers)
{
mostra = document.layers[x+1];
mostra.visibility = "show";
mostra.top= 15;
for (i=1; i<=quanti; i++)
{
aperto = document.layers[i];
if (i != (x + 1))
{
aperto.visibility = "hide";
}
}
}
Di seguito, invece, presento la routine di chiusura del menu valida per Netscape Navigator
if (document.layers)
{
document.layers[i+1].visibility = "hide";
}
