Un menu fisheye CSS con immagini

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.