0 Suscriptores al Feed del Blog
0 Suscriptores al Feed de Anotaciones Breves
27 usuarios online
Andres en Arte vs Diseño
Efecto "Nudging" con JQuery
7 COMENTARIOS - Publicado hace 14 meses - Clasificado en: JQUERY, TUTORIALES, TIPS, DESARROLLOEn el blog de David Walsh 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:
 |
|
|
Algunas entradas relacionadas:
- Construyendo un verdadero triple click con jQuery
- Style Switcher con jQuery
- Ajax con jQuery: el método load()
- Columnas de igual tamaño con jQuery
- Redimensionar el tamaño de fuente de forma animada con jQuery
- Rollover sobre imágenes con jQuery
- Crear cajas de mensajes con CSS y jQuery
También te puede interesar:
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 14 meses marcosdev - http://www.marcosdev.com Lo único para dejarlo perfecto serÃa utilizar un sprite y con CSS mover la imagen para evitar el parpadeo al hacer over, ya que seguimos conviviendo con navegadores como IE 6 que no cargan en caché la imagen de over. Por lo demás, impresionante las cosas que se pueden hacer hoy en dÃa con javascript y css |
 |
Publicado hace 14 meses Albertcito - Muy bueno el efecto!!!!!!!!! .... pensé hacerlo con css, pero se podrÃa lograr algo parecido pero no con ese movimiento, quedo lindisimo :D |
 |
Publicado hace 14 meses David Costales - http://blog.davidcostales.com Muy buen artÃculo Francisco. Te han gustado los botoncitos de demostración y descarga no?, jeje. |
 |
Publicado hace 14 meses Francisco - http://www.webintenta.com Espero que no te importe. Cuando estaba escribiendo el tutorial tenÃa abierto tu blog en otra pestaña y la verdad es que me venÃan de perlas. |
 |
Publicado hace 14 meses CalÃtoe.:. - http://www.diletante.net "dar con el codo" = codazo, ¿no? :) |
|
|
Publicado hace 14 meses David Costales - http://blog.davidcostales.com No, claro que no me importa. Me alegra que te hayan sido de utilidad. Un saludo. |
|
|
Publicado hace 14 meses Arturios - http://gnudista.blogalia.com ¡Que casualidad! el dÃa 1 le habÃa puesto dicho efectito a mi blog cargando las jquery de google. La verdad es que queda bonito. |
