Costruzione dei menu' in una pagina Web

La costruzione dei menu' dinamici in una pagina Web richiede molta dimestichezza con l'HTML e gli Script ma bisogna considerare il fatto che i menu' sono fondamentali per rendere un sito maggiormente leggibile e facile da consultare oltre che accattivante. Pertanto alla fine tutti gli sforzi saranno ampiamente ricompensati...

Vediamo allora come costruire un menu' dinamico sfruttando la tecnologia DHTML di Internet Explorer tramite VBScript (il mio linguaggio preferito). Logicamente, tale menu' verra' visualizzato correttamente solo in Internet Explorer, perche' gli altri browser non supportano il linguaggio VBScript. Altrimenti occorrera' tradurre il codice in JavaScript e farlo non e' particolarmente difficile, oppure si possono utilizzare altri espedienti in modo da raggirare il problema. A prescindere dal modo con cui si interviene, questo aspetto non deve essere trascurato quando si parla di siti Internet, quando si tratta di Intranet aziendali allora il discorso e' diverso...

Il metodo che vi spieghero' e' lo stesso metodo che ho adottato per realizzare l'indice di questo sito. Ci tengo a sottolineare che tale metodo e' stato ideato dal sottoscritto, pertanto non lo troverete in altri siti, riviste o qualsiasi altra pubblicazione, del resto tutto questo sito compresi i suoi contenuti sono opera del mio intelletto.
Detto questo, prima di vedere il codice nella sua interezza preferisco mostrarvi fin da subito quale sara' il risultato finale:

Per realizzare il codice che animi un menu' a tendina di questo tipo bisogna prima capire cos'e' un menu'. A tal proposito non so' se esista una definizione appropriata ma secondo me un menu' dinamico e' un insieme di voci che compaiono e scompaiono quando si selezionano tramite un semplice clic del mouse.

L'idea che adotteremo sara' quella di costruire delle tabelle in HTML le cui celle costituiscono le voci dei menu' e tramite la proprieta' di stile "display" controlleremo la comparsa di tali voci a seconda dei clic generati dall'utente. Tali clic verranno intercettati tramite l'evento del mouse "onclick", mentre il passaggio del mouse sopra le celle verra' controllato tramite gli eventi "onmouseout" e "onmouseover".

Vediamo allora il codice HTML che serve a generare la grafica del menu'. Ogni gruppo di voci sara' definito tramite una tabella, naturalmente tutte le voci principali saranno costituite da un'unica cella e si distingueranno dalle voci secondarie per un diverso "id". Nella figura che segue viene riportato il codice HTML nella sua interezza:

Il codice VBScript si compone di 4 procedure: le prime 2 gestiscono il passaggio del mouse sulle celle delle tabelle, le altre 2 si occupano invece del clic generato dall'utente sulle celle.

Dunque vi ho mostrato come costruire un semplice menu' a tendina da inserire in una qualunque pagina Web. Ovviamente tale menu' andra' personalizzato nei colori e nella grafica, in modo da essere conforme allo stile del sito.
Sfruttando la medesima tecnica si possono creare dei menu' piu' articolati rispetto a quello dell'esempio, aumentando il numero di voci o aumentando i gruppi di sottomenu' a seconda delle esigenze. Come sempre basta un po' di fantasia...