En el tutorial Beautiful Background Image Navigation with jQuery publicado Codrops nos enseñar a crear un espectacular menú navegación que tiene un efecto de imagen deslizante de fondo mediante jQuery.
Para comprobar el efecto podéis ver la demo haciendo click en la siguiente imagen:
Menú de navegación con fondo de imágenes
La idea principal es contar con tres elementos de una lista que contienen la misma imagen de fondo pero con una posición diferente. La imagen de fondo para cada elemento se deslizará en distintos momentos, creando un efecto bastante llamativo. Además de eso vamos a tener sub-menús que aparecen con el deslizamiento de cada uno de sus elementos de menú.
Los componentes necesarios para realizar el tutorial tal como se desarrolla en la demo son:
- el plugin jQuery para animación de imágenes de Alejandro Farkas
- las fotos de la colección Pat Beatiful B&W en Flickr
El menú de navegación funciona correctamente en Google Chrome, Firefox, Opera, Safari, IE8, IE7 e, incluso, en IE6, con una hoja de estilos específica debido a que se utiliza algo de CSS3.
The Como crear un menú de navegación con imagenes de fondo en jQuery by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
