Un menu fisheye CSS con immagini
Giovedì 17 Giugno 2010 - 08:09
di Gabriele Romanato
Realizzare un menu fisheye con i CSS non è difficile. Possiamo tuttavia aggiungere un ulteriore effetto grafico usando delle immagini
di sfondo.
Partiamo da una struttura come questa:
<ul id="navigation"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="images">Images</a></li> <li><a href="#" id="about">About</a></li> <li><a href="#" id="contact">Contact</a></li> </ul>
Utilizziamo degli ID diversi su ciascun link perché ciascuna voce avrà un’immagine di sfondo diversa.
Passiamo quindi a dare degli stili CSS:
body {
width: 60%;
margin: 0 auto;
padding: 2em 0;
background: #fff;
color: #333;
font: 76% Arial, sans-serif;
}
#navigation {
width: 100%;
font-size: 1.1em; /* 1em = 13px */
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
margin-right: 4px;
}
#navigation li a {
float: left;
display: block;
padding: 0 10px;
font-size: 1.2em;
color: #555;
font-weight: bold;
text-decoration: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 0;
height: 100%;
line-height: 5;
}
#navigation li a#home {
background-image: url("img/home-small.jpg");
}
#navigation li a#home:hover {
background-image: url("img/home-big.jpg");
line-height: 7;
}
#navigation li a#images {
background-image: url("img/images-small.jpg");
}
#navigation li a#images:hover {
background-image: url("img/images-big.jpg");
line-height: 7;
}
#navigation li a#about {
background-image: url("img/about-small.jpg");
}
#navigation li a#about:hover {
background-image: url("img/about-big.jpg");
line-height: 7;
}
#navigation li a#contact {
background-image: url("img/contact-small.jpg");
}
#navigation li a#contact:hover {
background-image: url("img/contact-big.jpg");
line-height: 7;
}
Dato che usiamo il float per allineare le voci, usiamo overflow: hidden per contenere i float. La dichiarazione height: 100%, usata più volte nel codice, serve a dare layout in IE 7 e 6.
Ciascun link avrà una dimensione del font maggiore e una line-height sufficiente a fare in modo che il testo appaia sotto l’immagine di sfondo. Ovviamente si può usare anche il padding. A questo proposito va ricordato che le dimensioni delle immagini sono di 28 x 28 pixel per lo stato normale e di 48 x 48 pixel su hover. Quando l’utente passa con il mouse su un link, cambiamo l’immagine di sfondo e aumentiamo l’interlinea in modo da tenere il testo sempre sotto l’immagine. L’immagine risulterà centrata rispetto al testo, perchè in precedenza abbiamo usato la dichiarazione background-position: 50% 0. Ovviamente possiamo migliorare la performance usando degli sprite CSS.
L’esempio finale è compatibile con Firefox, Opera, Safari, Chrome, IE 6, 7 e 8. È altamente migliorabile se prendiamo in considerazione l’ipotesi di usare anche JavaScript per ottenere ulteriori effetti grafici e dinamici.
Commenti
1
Ovviamente si può usare anche il padding.
direi che è meglio il padding top per gli a a 28px in stato normale e in hover a 48px perché dichiarando line-height c’è un’area cliccabile in basso oltre la base del testo…
vado a senso, sbaglio?
2
Forse sarebbe opportuno anche utilizzare uno sprite, no? :P
3
Posso dirlo? Gran bella porcata.
# - postato da zimok - 17 Giugno 2010 - 18:19
4
@EsseZeta si, hai ragione. :-)
@Fra_T avevo considerato questa opzione nel post. puoi usare background-position, anche se poi devi scegliere come calcolare l’altezza. hai un 28/48 sopra e un tot sotto pari a un altezza di 14px (font-size: 1.2em su 12px iniziali) :-)
@zimok Simone, se ho scritto qualcosa di sbagliato, mostrami l’errore. Altrimenti, perchè usi queste parole? :-)
# - postato da Gabriele Romanato - 17 Giugno 2010 - 19:47
5
come codice e implementazione è perfetto, è il risultato finale (che sicuramente è influenzato da certi trend che personalmente non sopporto) che è troppo kitsch per i miei gusti ;)
# - postato da zimok - 17 Giugno 2010 - 20:03
6
ah, ok! si in effetti è burino… moolto burino… ma che ce voi fà, alla gente je piace! :-D :LOL
# - postato da Gabriele Romanato - 17 Giugno 2010 - 20:07
7
@zimok: come testimoniano 5 anni di pubblicazioni, qui non abbiamo l’abitudine di cancellare commenti, censurare, etc. Le volte in cui è successo è solo perché dalla critica, più che legittima, si è sconfinato in altro. Credo che definire ‘porcata’ il lavoro altrui, soprattutto quando questo qualcuno si presenta con nome e cognome e usando toni urbani, non vada affatto bene. Questione di forme, sì. Ma mai come in questi casi la forma fa la sostanza. Se hai osservazioni da fare, sarebbero graditi un tono e un lessico di altro livello.
# - postato da Cesare Lamanna - 17 Giugno 2010 - 20:25
8
Buongiorno. Conosco HTML.it da dai suoi primi giorni e, indiscutibilmente secondo me, è sempre stato un buon punto di riferimento. Il signore che ha scritto PORCATA, gradirei potesse esser così gentile da chiarire se vuole esser risposto e, se si, cosa preferisce fra queste due definizioni. La prima, posta allo stesso livello: “Imbecille, a me piace, mostraci le tue di porcate e lasciati giudicare”. La seconda, che preferirei: “E’ solo questione di gusti personali: la sua è una critica gratuita e maleducata, perchè scrive così?”.
# - postato da Stefano - 18 Giugno 2010 - 08:27
9
@Stefano
Grazie per il commento. :-)
io e zimok ci siamo già chiariti quindi preferirei evitare di alimentare ulteriori polemiche. :-)# - postato da Gabriele Romanato - 18 Giugno 2010 - 09:34
10
Scusate, ma la tastiera spesso non è fedele al tono di voce con cui uno esclamerebbe una cosa che voleva essere assolutamente scherzoso.
# - postato da zimok - 18 Giugno 2010 - 10:38
11
Avrei utilizzato pure io gli sprite per evitare il tempo di swap delle immagini
# - postato da Michele - 21 Giugno 2010 - 12:05
12
Mah… codice pulito, tutto ok (giusta l’osservazione sugli sprite) ma l’effetto non mi dice granchè… questi fisheye sono molto più spettacolari con l’ausilio di un framework javascript. Con essi infatti l’immagine scala un poco per volta e quelle a fianco lo stesso, così invece si va da piccola a grande in uno scatto unico e secondo me si perde il bello.
2 esempi: http://marcgrabanski.com/artic.....cript-menu http://icon.cat/software/iconD...../dock.html# - postato da Kall3 - 22 Giugno 2010 - 10:23