Efecto Nudging con JQuery

Los menús son la puerta de entrada a la web, y por eso siempre me han interesado mucho. Si un menú es soso, es como ponerle mala cara a nuestro invitado, de manera que un diseñador debe procurar que los visitantes se sientan cómodos y sin llegar a la «pedantería» de excesos o diseños de mal gusto, debemos invitarlos «cordialmente» a pasar.

En el denominado «efecto nudging» –codazo– que yo traduciría mejor como «empujoncito», el hecho de que las letras se desplacen un poco y que en ocasiones aparezca una flecha es como decir: venga… anímate y pasa. Así que voy a estudiar un poco cómo está construída esta «invitación»  utilizando JQuery y CSS.

Ejemplo 1

Paso 1: hacer una lista desordenada con los elementos del menú

Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetaré en inglés porque es una palabra muy específica que significa –dar suavemente con el codo-, y no está de más agregarla a nuestro vocabulario técnico.

Paso 2: definimos los estilos CSS a la lista de menú

Lo quedebemos destacar del estilo es que para la etiqueta de enlace anchor (a) se modifica la imagen de fondo al poner el ratón encima y por acción del script cambia también el padding original de 15px a 35px. Por supuesto, todas estas medias varían dependiendo del tamaño y forma del menú.

Paso 3: aplicamos una función que permitirá los cambios de estilo

Primero localizamos el elemento al que se la ha aplicado la regla de estilo «nudge». La clase .hover permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando «entra» y otro cuando «sale». En ambos estados se aplica .animate, a la que se le pasa como primer parámetro la regla» padding» y como segundo el tiempo en milisegundos que esta animación debe durar.

Ver Código (+/-)

<div id="menu">
	<ul>
		<li><a href="#" class="nudge">home</a></li>
		<li><a href="#" class="nudge">acerca de nosotros </a></li>
		<li><a href="#" class="nudge">servicios</a></li>
		<li><a href="#" class="nudge">productos</a></li>
		<li><a href="#" class="nudge">contacta con nosotros</a></li>
	</ul>
</div>

<script language="javascript">
$(document).ready(function() {
	$('a.nudge').hover(function() {
		$(this).animate({ paddingLeft: '35px' }, 400);
	}, function() {
		$(this).animate({ paddingLeft: '15px' }, 400);
	});
});
</script>

#menu_nudging{
	width:235px;
	background-color: #fff;
}
#menu_nudging ul{
	list-style:none;
}
#menu_nudging li{
	list-style:none;
	margin:1px 0;
}
#menu_nudging li a{
	list-style:none;
	background: url(../imagenes/efecto_nudging/fdo_normal.gif) no-repeat;
	color:#fff;
	text-transform:uppercase;
	font-size:14px;
	text-decoration:none;
	display:block;
	height:30px;
	line-height:30px;
	padding:0 0 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#menu_nudging li a:hover{
	background: url(../imagenes/efecto_nudging/fdo_sobre.gif) no-repeat;
	color:#fff;
	text-decoration:none;
}

La referencia para esta práctica la he tomado del blog de webintenta, al que te remito para completar la información y distrutar de alguno de sus excelentes artículos. Espero que te la hayas pasado bien por aquí.