Crea con CSS un menú con efecto burbuja

Ricardo 24 Noviembre 2009

Últimamente muchos diseñadores web somos más propensos a usar jQuery para crear efectos, dejando de lado el CSS. Es cierto que hoy en día con el framework de Javascript se puede hacer casi cualquier cosa sin complicarnos, pero hoy explicaremos una alternativas para aquellos que prefieran crear todo con la hoja de estilos. Veremos como hacer un menú estilo burbuja, con CSS puro.

El tutorial es original de aext.net, y detalla dos métodos, nosotros nos quedamos con el más simple. Para usuarios avanzados tenéis detallado en la fuente, cómo hacerlo con intercambio de imágenes. El objetivo es crear un menú al estilo de Apple Dock, repito que es posible crearlo con el plugin para jQuery, jqDock, además de otras alternativas menos atractivas como Mootools. Yo personalmente, aunque pueda ser más vistoso usando jQuery, me quedo con el CSS y su mayor velocidad, algo muy importante tras los últimos cambios en posicionamiento.

La técnica sencilla se basa en el clásico método de CSS sprites, que consiste en jugar con la propiedad background-position, de forma que con una sola petición al servidor de una imagen, obtengamos el resultado que buscamos. Fijaos en el código de ejemplo, no es necesario que sea idéntico pero servirá para hacerse una idea:

Luego prepara las imágenes para los sprites, deberían quedar como a continuación. Son muy importantes las medidas, debéis ajustar los píxeles y calcular los que os convengan ya que las que se muestran aquí están hechas a la medida del ejemplo.

Daos cuenta que la imagen que cargan en el ejemplo es esta, para que os hagáis una idea. Ahora solo queda preparar nuestro CSS para crear nuestro menú. Especial atención la imagen de fondo (propiedad background), le indicaremos la imagen anterior.

Ahora viene la parte más compleja, ya que hay que calcular cada pixel de forma precisa, con este código de ejemplo se observa como hacemos para cambiar la imagen de fondo.

Espero que os sea de utilidad, como dije antes, en el articulo fuente tenéis el método avanzado. Además, podéis echarle un vistazo a la demostración para ver el resultado de ambos métodos.

Vía | aext.net