È 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
7 commenti
ok, allora appena ho tempo cerco di fare il menù per il tema di windows, così si vede cosa viene fuori…. 😊
Lo devo un pochino smanettare perché voglio mettere nel menù un contenitore per i widget. Non l'ho mai fatto ma vedrai che provando qualcosa salta fuori….
Avevo pensato che dovevo scriverti un commento ma ho spento il computer prima, ma vedo che hai già visto.
Per mettere i Widget dovrebbe bastare il solid {widget pos=bottom}<li>{$content}</li>{/widget}.
Comunque mi sono dimenticato di parlare dell'accessibilità perché non ci ho proprio pensato.
Come faccio a far aprire il menù in salita ansiché in discesa? e vorrei velocizzare la comparsa del menù
Mi dispiace ma purtroppo non si può fare la prima cosa, la seconda la modifichi col primo parametro.
Puoi cambiare funzione e per esempio usare show.
porcaccia… allora l'unica soluzione è visualizzare il menù istantaneamente ed impostare la sua comparsa con valori negativi sull'asse delle ordinate… vabbè..
provo ad usare show se riesco a capire come.
Grazie
Fatto, ma di da dei problemini:
dopo 2 o 3 volte che apro e chiudo il menù, l'immagine di sfondo scompare e rimane solo a sfondo dei widget inseriti.
Esempio: ho inserito il widget dell'area amministrazione ma il menù l'ho impostato con un'altezza di 500px, maggiore quindi di quello necessario per il solo widget amministrazione.
La prima volta che apro il menù, questo è alto 500 con in cima il widget e sotto tutto vuoto, la seconda colta il menù si apre, ma appena finisce il widget amministrazione non c'è nessuno sfondo del menù, ma solo trasparente. Allora ho diminuito tutto per fare un menù che racchiuda solo l'amministrazione. però così è piccolino e basso… boh…
Se è per questo non ti funziona neanche ricliccare su start…
Comunque ho trovato il problema (me l'hai praticamente detto tu).
Linea 124 del file js: imposta al posto di auto la tua altezza e dovrebbe essere ok.
Comunque deve pur esserci qualcosa che lo fa venire dal basso ma forse con jQuery UI.