Ultimo World Wide Developer Conference di Apple (WWDC 2011), presentazione della nuova feature "Versions" che permette di mantenere le versioni di tutti i documenti in modo da poterli successivamente recuperare; nel filmato si vedono delle "tacchette" alla destra del monitor e avvicinandosi con il mouse queste si ingrandiscono e appare la versione del documento... se è quella che mi interessa ci clicco sopra e la versione viene ripristinata.
Si può fare lo stesso effetto utilizzando HTML + javascript + CSS?
Questo il risultato finale : http://www.diegoavanzini.it/wwwlife/timeline/
Per ottenerlo ho utilizzato e personalizzato il codice trovato in un un tutorial online.
Questo codice permette di creare un menu che scorre all'interno di un DIV al movimento del mouse evidenziando la voce su cui si trova il puntatore.
In pratica con jQuery viene modificata la proprietà padding e il colore di sfondo dell'elemento <href> ingrandendolo sull'evento "mouseover" e riportandolo alle dimensioni originali sull'evento "mouseout".
Le modifiche che ho apportato sono poche e semplici:
1. ho portato gli elementi <span> con le voci di menu fuori dai relativi elementi href e li ho resi invisibili all'apertura della pagina, tutti tranne quelli con id "important"
$(this).find('#menu li a').not('#important').siblings().fadeTo(0, 0);
2. ho aggiunto l'id "important" sulle linee che voglio evidenziare mantenendole un pò più grandi e mantenendo visibile(vedi sopra) la voce di menu corrispondente.
3. ho diminuito nel css la proprietà padding dell'href e la proprietà height del <li> per rimpicciolire la dimensione delle linee in modo da rendere il tutto il più possibile somigliante ad una timeline.
Per quanto riguarda lo scorrere del menu al muoversi del mouse il tutto è ben spiegato nel tutorial originale e l'ho mantenuto com'era, così anche tutto il resto.
La feature di scorrimento del menu non è presente nel video ma mi sembra molto utile all'interno di uno spazio limitato quale può essere una pagina web.
Questo il risultato finale : http://www.diegoavanzini.it/wwwlife/timeline/
Per ottenerlo ho utilizzato e personalizzato il codice trovato in un un tutorial online.
Questo codice permette di creare un menu che scorre all'interno di un DIV al movimento del mouse evidenziando la voce su cui si trova il puntatore.
In pratica con jQuery viene modificata la proprietà padding e il colore di sfondo dell'elemento <href> ingrandendolo sull'evento "mouseover" e riportandolo alle dimensioni originali sull'evento "mouseout".
Le modifiche che ho apportato sono poche e semplici:
1. ho portato gli elementi <span> con le voci di menu fuori dai relativi elementi href e li ho resi invisibili all'apertura della pagina, tutti tranne quelli con id "important"
$(this).find('#menu li a').not('#important').siblings().fadeTo(0, 0);
2. ho aggiunto l'id "important" sulle linee che voglio evidenziare mantenendole un pò più grandi e mantenendo visibile(vedi sopra) la voce di menu corrispondente.
3. ho diminuito nel css la proprietà padding dell'href e la proprietà height del <li> per rimpicciolire la dimensione delle linee in modo da rendere il tutto il più possibile somigliante ad una timeline.
Per quanto riguarda lo scorrere del menu al muoversi del mouse il tutto è ben spiegato nel tutorial originale e l'ho mantenuto com'era, così anche tutto il resto.
La feature di scorrimento del menu non è presente nel video ma mi sembra molto utile all'interno di uno spazio limitato quale può essere una pagina web.
