Efecto “Nudging” con jQuery
En el blog de Intenta nos muestran como lograr un interesante efecto con jQuery para nuestros menús. Al posar el ratón sobre una opción de menú ésta se desplaza hacia la derecha con una animación. Es un efecto denominado “nudging”, que se podría traducir como dar con el codo al enlace.
Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.
<script type="text/javascript" src="jquery-1.2.6.js"></script>
Seguidamente construimos un menú al que deberemos añadir la clase “nudge” a cada uno de los enlaces:
<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>
Ahora tan sólo queda animar la propiedad “padding-left” tanto cuando estamos sobre una opción y cuando salimos de ella:
$(document).ready(function() { $('a.nudge').hover(function() { //mouse in$(this).animate({ paddingLeft: '35px' }, 400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '15px' }, 400);
});
});
Yo he establecido un valor inicial de “padding-left” de 15 px y que es el valor al que ha de retornar la opción de menú al evento “mouse-out”. Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.
Para mostrar un ejemplo un poco más completo. He realizado tres menús, ya con CSS, que incorporan el efecto.
Ejemplo 1:
 |
 |
 |
Ejemplo 2:
 |
|
|
Ejemplo 3:
 |
|
|
Tags: jquery, nudging