Menu orizzontale dinamico in Dhtml

Autore : Luca Ruggiero

Premessa
In questo articolo analizzeremo il modo in cui è possibile realizzare un menu orizzontale dinamico, per intenderci, sullo stile delle applicazioni Windows, i famosi menu File - Modifica - Visualizza - ecc...
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 (credo anche con la versione 4.0).
Tuttavia, alla fine dell'articolo mostrerò anche la funzione "tradotta" per Netscape Navigator. Non mi sono preoccupato di fornire al menù particolari stilizzazioni, è comunque sufficiente una discreta conoscenza dei Fogli di stile Css 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è all'estetica dell'intero menu, cosa che conto sarà vostra cura fare). Ovviamente dinamizzeremo l'applicazione con Javascript. Per maggior chiarezza divideremo in tre distinti file i suddetti codice.

Il file menu.htm è il file di output su cui costruiremo fisicamente il menu. In questo stesso file includeremo i richiami ai file esterni (di seguito descritti nelle loro funzionalità), onde effettuare eventuali modifiche, sia stilistiche che funzionali, agendo una sola volta per trovare il menu aggiornato in tutte le pagine che lo conterranno.
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.

Adesso al lavoro!

Costruzione fisica del menu: il file menu.htm
Creiamo un nuovo file Html e salviamolo come menu.htm; inseriamo tra i Tag e i richiami verso i file Css e Javascript, le cui funzionalità sono state descritte nel paragrafo precedente:

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.

E' importante sottolineare che l'esempio di menu in questione prevede necessariamente un layout di pagina posizionato staticamente sul margine sinistro della pagina. E' 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

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>

La stilizzazione del Tag

è 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


#sottomenu {
   position: Absolute;
   visibility: Hidden;
   width: 120px;
   padding: 1px;
   border: Solid 1px #000000;
}

mentre il resto è del tutto personalizzabile ed ampliabile.

Dinamizzazione Javascript: il file menu.js
Come già accennato nelle prime righe di questo 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 menu principali
function Apri(conta)
{
   if(document.all) // Identifichiamo
                             // Microsoft Internet Explorer
   {
      var elemento = event.toElement;
      var mostra = document.all.sottomenu[conta];      
          mostra.style.visibility = "visible";         
          mostra.style.top = 15;      
             for (i=0; i<quanti; i++)
             {
                aperto = document.all.sottomenu[i];
                menu = document.all.principale[i];             
                   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";
}