È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro.

Ai div.menucontent è stato applicato il posizionamento assoluto per non fare troppo spazio tra i menu, una larghezza fissa e un display: none; per fare in modo che non si veda.

La base è questa per fare un menu. Dopo sono stati aggiungi elementi per esempio separatori tra voci etc a HTML/CSS ma a dir la verità manca ancora per esempio un cambiamento di colore agli item del menu quando ci vai sopra, implementabile benissimo tramite CSS che però lascio alla fantasia di ciascuno di voi.

Il javascript serve solo per animare il menu.

Con jQuery è molto facile scrivere poco per ottenere molto (questo è anche il suo motto in pratica).

In effetti il codice non è che faccia un qualcosa di difficilissimo ma è lungo perché tutto commentato.

Visto che ho fatto la “fatica” di tenere un codice commentato e con variabili che tutti potessero capire, vi rimando ad aprire direttamente il file javascript.

Non ho fatto il test cross-browser dello script, solo con Firefox e Chromiumm, perciò se qualcuno potesse farlo (soprattutto Internet Explorer), gli sarei molto grato se lo facesse e mi postasse i risultati.

Questo script è una base comunque solida, ottima per fare menu tipo File, Modifica, etc, ma con poche modifiche dovrebbe andare bene anche per menu che vengono dal basso.

Sinceramente non ho fatto neanche il test con vecchie versioni di jQuery e includo la versione su cui ho sviluppato il menu (la 1.4.2, attuale stabile).

Licenza: GNU GPL 2 (se usate lo script, seppure non è un obbligo, vi sarei molto grato se in un commento mettereste il link alla mia homepage).

Download: [iurl:relative:fp-content/attachs/menu.tar.gz title=”Tarball con i vari file”]menu.tar.gz