Efecto Nudging con JQuery
Por: el 12/agosto/2010 Cat. Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 CSS, 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 (+/-)
HTML
<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>
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.
JQuery
<script language="javascript">
$(document).ready(function() {
$('a.nudge').hover(function() {
$(this).animate({ paddingLeft: '35px' }, 400);
}, function() {
$(this).animate({ paddingLeft: '15px' }, 400);
});
});
</script>
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.
CSS
#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Ã.
