Un menu fisheye con i CSS viene realizzato con l'ausilio di icone e con la modifica delle dimensioni delle icone e del testo sullo stato :hover dei link. Possiamo ottenere un effetto ancora più marcato animando i link con le transizioni CSS. Vediamo insieme i dettagli dell'esempio.
Abbiamo una semplice struttura HTML:
<ul id="navigation">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="images">Immagini</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="contact">Contatti</a></li>
</ul>
I diversi ID sui link corrispondono alle diverse immagini di sfondo usate, due per ciascun link. Abbiamo infatti un'immagine di sfondo ridotta per lo stato normale dei link ed una a dimensioni ingrandite per lo stato :hover:
#navigation {
width: 100%;
font-size: 1.2em;
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 48px 0;
font-size: 1em;
color: #555;
font-weight: bold;
text-decoration: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 100%;
height: 100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#navigation li a:hover {
font-size: 1.2em;
text-transform: uppercase;
padding-bottom: 55px;
}
#navigation li a#home {
background-image: url("img/home-small.jpg");
}
#navigation li a#home:hover {
background-image: url("img/home-big.jpg");
}
#navigation li a#images {
background-image: url("img/images-small.jpg");
}
#navigation li a#images:hover {
background-image: url("img/images-big.jpg");
}
#navigation li a#about {
background-image: url("img/about-small.jpg");
}
#navigation li a#about:hover {
background-image: url("img/about-big.jpg");
}
#navigation li a#contact {
background-image: url("img/contact-small.jpg");
}
#navigation li a#contact:hover {
background-image: url("img/contact-big.jpg");
}
Le transizioni CSS specificate sullo stato normale dei link ci permettono di ottenere un effetto morbido e progressivo sulle proprietà font-size, text-transform e padding-bottom il cui valore è stato modificato sullo stato :hover. Notate come il padding inferiore di ciascun link sia proporzionale all'altezza dell'immagine più grande, che la dimensioni di 48 x 48 pixel.
Potete visionare l'esempio finale in questa pagina.