Stiamo lavorando ad un progetto di sito web per una scuola di lingue di Roma: la cliente ci ha chiesto di realizzare il menu delle pagine non seguendo i classici canoni di posizionamento nella parte alta del sito web.

Per questo abbiamo pensato di creare un sistema che ricorda quello delle vecchie rubriche telefoniche: ricordate? C’era l’elenco di tutte  le lettere dell’alfabeto organizzato in modo sfalsato, in modo che fosse facile trovare nell’elenco il numero di ‘Francesco’ (giusto per scrivere il primo nome che mi viene in mente :D)

Tornando al problema, come possiamo realizzare un menu con quello stile? Esistono un’innumerevole quantità di soluzioni, in questo articolo mi concentrerò prevalentemente su:

  1. jQuery ui tabs
  2. jQuery e CSS3

Creare dei tab verticali co jQuery UI tabs è sicuramente la strada più semplice e scalabile.

HTML

jQuery

Potete visualizzare la demo a questo link

Seguire la seconda strada, invece, richiede scrivere più codice, ma contemporaneamente avere molto più controllo sul risultato finale

HTML

CSS3

jQuery

Potete visualizzare la demo a questo link.

Quando sceglierete la strada più adatta alle vostre esigenze, ricordatevi che CSS3 non è ancora supportato da tutti i browsers.

(alcuni estratti di codice sono stati riusati da faridesign)

Dillo ad un amico

autore

Cercando l'impossibile, l'uomo ha sempre realizzato e conosciuto il possibile, e coloro che si sono saggiamente limitati a ciò che sembrava possibile non sono mai avanzati di un sol passo.

Cosa ne pensi ?

Scrivici per avere informazioni sui nostri servizi
o per entrare a far parte del network di smart worker di Evermind