Menu orizzontale dinamico in Dhtml

Autore: Luca Ruggiero | Tell a Friend

Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

Comparso su HTML.it il 2 Aprile 2003 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

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 <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 language="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.

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 <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()">&nbsp;</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 foglio di stile 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 
#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 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];
       }
   }
}
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";
}

IN EVIDENZA
Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Offerte lavoro Hosting Joomla Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb Sito pronto Download veloce Ottimizzazione PC Traduzioni