CSS: Crea un menú de íconos al estilo Apple Dock

2009-12-01

CSS: Crea un menú de íconos al estilo Apple Dock

Seguramente estén familiarizados con el plugin jQuery Dock que permite a los desarrolladores crear un menú como la Apple Dock.

En el artículo de hoy, te enseñaremos cómo crear un menú similar con el efecto burbuja utilizando simplemente CSS.

Método 1: Sprites CSS

Utilizar sprites CSS es la forma más simple de lograr el efecto burbuja. Sólo necesitas cambiar la imagen de fondo.

Al principio, tu HTML debería lucir así:

Después de preparar la imagen para sprites, debería lucir así:

sprites

Este es el código CSS que necesitas para crear la lista de menús y el fondo de imagen por defecto de los links:

Es muy importante al utilizar sprites CSS calcular las dimensiones de la imagen de fondo. Es necesario ser preciso con los píxeles. Necesitarás utilizar el CSS de abajo para cambiar la imagen de fondo de los links.

Y ese es el método 1. Muy fácil y simple. Ahora, veamos el método 2, el intercambio de imagen.

Método 2: Intercambio de imágenes

Con este método, utilizarás más HTML y menos CSS. Ya que usaremos 2 imágenes para cada link, el código HTML completo debería lucir como este:En este método, haremos algunos cambios. El efecto hover hará que el botón seleccionado se mantenga sobre los otros. La diferencia entre el anterior método y éste es que aquí se debe programar la altura y el ancho para los elementos ya que no queremos que la lista se mueva y cambie de tamaño cuando el mouse esté sobre ella.

Recuerda configurar la posición de la imagen en relative, porque configuraremos z-index para las imágenes grandes y el z-index funciona sólo con posición absoluta o relativa. native-image-changing

Cuando el mouse pasa por encima, configuraremos el margen de la imagen en 28px porque cuando agrandamos las imágenes, queremos que la más grande tenga el mismo centro que la pequeña. Es muy importante ver el efecto zoom. La cantidad de pixel que necesitamos para el margen se calcula como