Link copiato negli appunti
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:
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
height: 100%
dare layout
Ciascun link avrà una dimensione del font maggiore e una line-height
background-position: 50% 0
