SummArg | Cursos y recursos para webmasters

14/07/2011

Sliding Background Image menu con jQuery

Codrops nos acerca una vez mas un recurso muy bien logrado en donde, utilizando jQuery y los plugins jQuery.easing.js y jQuery.bgImageMenu.js, construyen un impresionante menú en el que su fondo cambia a medida que el usuario ubica el puntero del mouse sobre sus diferentes ítems.

En el ejemplo podrán observar, debajo de la animación principal, todas las opciones de animación disponibles.

 

El menú debe tener la siguiente estructura HTML:
<div id="sbi_container">
<div data-bg="images/1.jpg">
<a href="#">About</a>
<div>
<ul>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
</ul>
</div>
</div>
<div data-bg="images/2.jpg">
...
</div>
...
</div>

Siendo sbi_container el contenedor de todos los paneles, allí se cargará primero cada imagen y luego su menú. Antes de la etiqueta </body> se deben insertar los plugins y configurar el script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>
<script type="text/javascript">
$(function() {
$('#sbi_container').bgImageMenu({
defaultBg : 'images/7.jpg',
menuSpeed : 300,
border : 10,
type : {
mode : 'verticalSlideAlt',
speed : 250,
easing : 'jswing',
seqfactor : 100
}
});
});
</script>

Y se pueden utilizar los siguientes parámetros:

defaultBg: Imagen por defecto cuando no hay ningún elemento en estado hover
pos: Si no hay defaultBg definido, pos indica el panel que debe ser mostrado
width: Ancho del contenedor y de las imágenes (deberán ser todas del mismo tamaño)
height: Altura del contenedor y de las imágenes
border: Ancho del margen entre paneles
menuSpeed: Velocidad de la animación del menú.
mode: Tipo de animación: def | fade | seqFade | horizontalSlide | seqHorizontalSlide | verticalSlide | seqVerticalSlide | verticalSlideAlt | seqVerticalSlideAlt
speed: Velocidad de la animación del panel
easing: Efecto easing para la animación
seqfactor: Delay entre cada ítem para seqFade | seqHorizontalSlide | seqVerticalSlide | seqVerticalSlideAlt

 

Descargar | Demos

Dejar un comentario

  1. Tengo un pequeño problema de validación en w3c.
    Se trata del atributo data-bg.
    ¿Hay alguna alternativa para que pase la validación?

Dejar un comentario