Efecto de Menu Navegacion Background con jQuery



La idea principal es contar con tres elementos en lista que contengan la misma imagen de fondo pero con una posición diferente.

La imagen de fondo para cada artículo se animará al deslizar el mouse sobre la misma en momentos diferentes, creando un efecto realmente bonito. La imagen de fondo se deslizara a la dirección del elementos en lista el medio dependerá del tema que el usuario estaba antes: viene de la derecha, que se desliza desde la izquierda y viceversa.

Para lograr este efecto se utilizo "Background-Position Animation Plugin", un plugin jQuery que crea un efecto de animación.

La instalación seria mas o menos esta, primero añades el estilo de CSS a la cabecera del sitio:


<style src="DOMINIO.COM/RUTA DEL ARCHIVO/syle.css" type='text/css'></style>


Ahora el fixed para IE6 abajo:

<br /><style src="DOMINIO.COM/RUTA DEL ARCHIVO/styleIE6.css" type='text/css'></style><br />


seguido añades la dirección del archivo jQuery:

<br /><script src='DOMINIO.COM/RUTA DEL ARCHIVO/jquery.bgpos.js' type='text/javascript'/><br />


ahora el con este código creamos el menu navegación con background:

<br /><br /><div id="menuWrapper" class="menuWrapper bg1"><br />	<ul class="menu" id="menu"><br />		<li class="bg1" style="background-position:0 0;"><br />			<a id="bg1" href="#">Our Passion</a><br />			<ul class="sub1" style="background-position:0 0;"><br />				<li><a href="#">Submenu 1</a></li><br />				<li><a href="#">Submenu 2</a></li><br />				<li><a href="#">Submenu 3</a></li><br />			</ul><br />		</li><br />		<li class="bg1" style="background-position:-266px 0px;"><br />			<a id="bg2" href="#">Our Brands</a><br />			<ul class="sub2" style="background-position:-266px 0;"><br />				<li><a href="#">Submenu 1</a></li><br />				<li><a href="#">Submenu 2</a></li><br />				<li><a href="#">Submenu 3</a></li><br />			</ul><br />		</li><br />		<li class="last bg1" style="background-position:-532px 0px;"><br />			<a id="bg3" href="#">Contact</a><br />			<ul class="sub3" style="background-position:-266px 0;"><br />				<li><a href="#">Submenu 1</a></li><br />				<li><a href="#">Submenu 2</a></li><br />				<li><a href="#">Submenu 3</a></li><br />			</ul><br />		</li><br />	</ul><br /></div><br />


Hasta aquí logras el efecto creado por el diseñador, ahora una explicación de lo que debes saber para lograr tu personalización del código, el siguiente código del CSS son las imágenes del background que utilizaras:

<br />.bg1{<br />    background-image: url(../images/1.jpg);<br />}<br />.bg2{<br />    background-image: url(../images/2.jpg);<br />}<br />.bg3{<br />    background-image: url(../images/3.jpg);<br />}<br />


El siguiente código es del script que logra el las secuencias del submenu e imágenes, tamaños del reflejo y animación:

<br />$(function() {<br />	/* position of the <li> that is currently shown */<br />	var current = 0;<br /><br />	$('#bg1,#bg2,#bg3').mouseover(function(e){<br /><br />		var $this = $(this);<br />		/* if we hover the current one, then don't do anything */<br />		if($this.parent().index() == current)<br />			return;<br /><br />		/* item is bg1 or bg2 or bg3, depending where we are hovering */<br />		var item = e.target.id;<br /><br />		/*<br />		this is the sub menu overlay. Let's hide the current one<br />		if we hover the first <li> or if we come from the last one,<br />		then the overlay should move left -> right,<br />		otherwise right->left<br />		 */<br />		if(item == 'bg1' || current == 2)<br />			$('#menu .sub'+parseInt(current+1))<br />			    .stop()<br />				.animate({backgroundPosition:"(-266px 0)"},300,function(){<br />					$(this).find('li').hide();<br />				});<br />		else<br />			$('#menu .sub'+parseInt(current+1))<br />				.stop()<br />				.animate({backgroundPosition:"(266px 0)"},300,function(){<br />					$(this).find('li').hide();<br />				});<br /><br />		if(item == 'bg1' || current == 2){<br />			/*<br />			if we hover the first <li> or if we come from<br />			the last one, then the images should move left -> right<br />			*/<br />			$('#menu > li')<br />				.animate({backgroundPosition:"(-800px 0)"},0)<br />				.removeClass('bg1 bg2 bg3')<br />				.addClass(item);<br />			move(1,item);<br />		}<br />		else{<br />			/*<br />			if we hover the first <li> or if we come<br />			from the last one, then the images should move<br />			right -> left<br />			*/<br />			$('#menu > li')<br />				.animate({backgroundPosition:"(800px 0)"},0)<br />				.removeClass('bg1 bg2 bg3')<br />				.addClass(item);<br />			move(0,item);<br />		}<br /><br />		/*<br />		We want that if we go from the first one to the last one<br />		(without hovering the middle one), or from the last one<br />		to the first one, the middle menu's overlay should also<br />		slide, either from left to right or right to left.<br />		 */<br />		if(current == 2 && item == 'bg1'){<br />			$('#menu .sub'+parseInt(current))<br />			.stop()<br />			.animate({backgroundPosition:"(-266px 0)"},300);<br />		}<br />		if(current == 0 && item == 'bg3'){<br />			$('#menu .sub'+parseInt(current+2))<br />			.stop()<br />			.animate({backgroundPosition:"(266px 0)"},300);<br />		}<br /><br />		/* change the current element */<br />		current = $this.parent().index();<br /><br />		/* let's make the overlay of the current one appear */<br /><br />		$('#menu .sub'+parseInt(current+1))<br />			.stop().animate({backgroundPosition:"(0 0)"},300,function(){<br />				$(this).find('li').fadeIn();<br />			});<br />	});<br />	/*<br />	dir:1 - move left->right<br />	dir:0 - move right->left<br />	 */<br />	function move(dir,item){<br />		if(dir){<br />			$('#bg1').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(0 0)"},200);<br />			$('#bg2').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(-266px 0)"},300);<br />			$('#bg3').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(-532px 0)"},400,function(){<br />						$('#menuWrapper').removeClass('bg1 bg2 bg3')<br />										 .addClass(item);<br />					 });<br />		}<br />		else{<br />			$('#bg1').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(0 0)"},400,function(){<br />						$('#menuWrapper').removeClass('bg1 bg2 bg3')<br />										 .addClass(item);<br />					 });<br />			$('#bg2').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(-266px 0)"},300);<br />			$('#bg3').parent()<br />					 .stop()<br />					 .animate({backgroundPosition:"(-532px 0)"},200);<br />		}<br />	}<br />});<br />


Diseño y Tutorial | CODROPS






Suscripciones

Blog Archivo