Un menú de ejemplo

Regresar al índice

1. Objetivo

Vamos a crear un menú simple compuesto de iconos. Al pasar el ratón por encima de esos vínculos, las imágenes se ampliarán, al mismo tiempo que girarán ligeramente y que mostrarán una deformación horizontal.

2. La estructura del menú

El menú utilizará la clásica lista ul:

<ul id="menu">

<li><a href="#"><img src="twitter.png" alt="twitter" />

</a></li>

<li><a href="#"><img src="facebook.jpg" alt="facebook" />

</a></li>

<li><a href="#"><img src="flickr.png" alt="flickr" />

</a></li>

</ul>

3. El diseño

Los elementos li presentarán los estilos de diseño "habituales":

#menu li {

list-style: none;

display: inline-block;

margin-right: 20px;

}

Cada imagen (img) se transformará cuando se pase el cursor por encima del vínculo (a:hover). Se le aplicará un cambio de escala (scale), una rotación (rotation) y un desplazamiento (translate).

#menu li a:hover img {

-moz-transform: scale(1.1) rotate(3deg) translateX(2px);

-webkit-transform: scale(1.1) rotate(3deg) translateX(2px);

-o-transform: scale(1.1) rotate(3deg) translateX(2px);

transform: scale(1.1) rotate(3deg) translateX(2px);

}

4. El resultado visual:

Esta sería la visualización inicialmente:

Esta sería la visualización cuando se pase el cursor por encima de la imagen:

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice

Twittear