JavaScript e CSS: un menu a comparsa

L'uso combinato di JavaScript e CSS può generare effetti davvero interessanti, come il menu che vi propongo in questo breve articolo. Il codice che vi presento sfrutta una importante proprietà dei fogli di stile: visibility. Con visibility possiamo dire al browser se mostrare o meno un elemento della pagina, dipende dal valore assegnato alla proprietà che può essere Hidden (nascosto) o Visible (visibile). Attenzione, l'elemento nascosto occuperà in entrambi i casi lo spazio, come se fosse presente nella pagina. Se desiderate nascondere del tutto l'elemento è preferibile usare la proprietà display, fissandola al valore none. In questa pagina potete dare uno sguardo al foglio di stile usato.

Il menu viene generato attraverso più blocchi div, quello più esterno fa da contenitore ai blocchi per le sezioni e le voci del menu. Ognuno di questi è poi etichettato in maniera tale da appartenere a una classe di elementi. Le classi previste nel foglio di stile sono: menu, sezione, voci e voce.

Gli id assegnati agli stessi elementi detti sopra permettono al codice JavaScript (funzione getElementById) di cercare e modificare la proprietà visibility! L'accesso alla proprietà avviene infatti grazie alla chiamata a document.getElementById(id_element).style.visibility

All'interno della pagina html è possibile notare le funzioni JavaScript showLevel e hideLevel incaricate di nascondere e mostrare i livelli inferiori dei menu. Le funzioni mouseOn e mouseOut, invece, disegnano lo sfondo alla sezione e alle sue voci. Qui trovate un esempio del menu!