Hoverbox menu: il potere dei css

Ho scritto qualche settimana fa un post su Hoverbox, elegante ed efficace uso dei css ideato da Nathan di Sonspring.com per gestire una galleria di immagini (thumbs + full size) senza impiegare javascript.

Ieri mi sono imbattuto in una implementazione, meglio in un utilizzo creativo della tecnica che sta dietro a Hoverbox, da parte di Stuart Robertson, di Designmeme: eccoci qui a parlare di Hoverbox menu (l’esempio fatto da Stuart e’ in fondo alla pagina).

Invece di un ormai “comune” – sebbene pur sempre splendido, quando implementato bene – menu con rollover via css Stuart propone un menu in cui nel momento del passaggio del mouse sull’item del menu (stato a:hover) l’immagine di sfondo si ingrandisce (come in hoverbox il passaggio del mouse sulla miniatura offriva la visualizzazione del pic full size). Bello.

Da notare, tra le altre cose, che Stuart usa la tecnica CSS Sprite – una stessa immagine contiene quella base e quella che viene sovrapposta, evitando percezioni di ritardo sul rollover (ed aggirando anche il problema del flickering di IE6) senza bisogno di preload gestiti via js.

OK. Guarda(te) l’esempio di Stuart, dunque, e valutate.

Ma a sto giro ho voluto metterci su le mani anch’io. Ecco dunque il mio esempio.


L’effetto “specchio-riflesso 2.0” l’ho ottenuto giochicchiando con Gimp, quindi non c’entra con il codice css.

Dove invece ho modificato, minimamente, le spaziature, per evitare sia le sovrapposizioni (che invece Stuart voleva) sia che l’immagine del rollover andasse a muovere le altre, per cui le ho assegnato un margine negativo – in div#navigation li a:hover span abbiamo un margin-right: -45px.

Altra noticina, ovvero un limite in termini di accessibilità: i link testuali sono nascosti – attraverso la regola div#navigation li a span em{display: none;}.

Un’implementazione altamente professionale della tecnica dovrebbe invece utilizzare l’image replacement andando solo a coprire i link testuali – in modo che possano essere fruiti in contesti di visualizzazioni senza immagini.

Il guru da cui pesco il suggerimento è, per l’ennesima volta, Alessandro Fulciniti.

Ultime due cose: il mio esempio è in fase “alfa”, assolutamente non preciso al pixel, nè con .png realmente ottimizzate. E per rendere il menu davvero “cool” manca anche una immagine per lo pseudo-stato active (la pagina corrente).

Posterò un’update…

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: