Ejemplo 1<\/h6>\n\n\n- Inicio<\/a><\/li>\n
- Servicios <\/a><\/li>\n
- Productos<\/a><\/li>\n
- Noticias<\/a><\/li>\n
- Contactar<\/a><\/li>\n<\/ul>\n<\/div>\n
Paso 1: hacer una lista desordenada con los elementos del men\u00fa<\/h6>\n
Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetar\u00e9 en ingl\u00e9s porque es una palabra muy espec\u00edfica que significa –dar suavemente con el codo<\/em>-, y no est\u00e1 de m\u00e1s agregarla a nuestro vocabulario t\u00e9cnico.<\/p>\nPaso 2: definimos los estilos CSS a la lista de men\u00fa<\/h6>\n
![\"Imagen](\"https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/2010\/08\/nudgin_fondo_normal.gif\")
\n![\"Imagen](\"https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/2010\/08\/nudgin_fondo_sobre.gif\")
<\/p>\n
Lo quedebemos destacar del estilo es que para la etiqueta de enlace anchor (a) se modifica la imagen de fondo al poner el rat\u00f3n encima y por acci\u00f3n del script cambia tambi\u00e9n el padding original de 15px a 35px. Por supuesto, todas estas medias var\u00edan dependiendo del tama\u00f1o y forma del men\u00fa.<\/p>\n
Paso 3: aplicamos una funci\u00f3n que permitir\u00e1 los cambios de estilo<\/h6>\n
Primero localizamos el elemento al que se la ha aplicado la regla de estilo \u00abnudge\u00bb. La clase .hover<\/a> permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando \u00abentra\u00bb y otro cuando \u00absale\u00bb. En ambos estados se aplica .animate<\/a>, a la que se le pasa como primer par\u00e1metro la regla\u00bb padding\u00bb y como segundo el tiempo en milisegundos que esta animaci\u00f3n debe durar.<\/p>\nVer C\u00f3digo (+\/-)<\/a><\/h6>\n\nHTML<\/h2>\n<div id=\"menu\">\r\n\t<ul>\r\n\t\t<li><a href=\"#\" class=\"nudge\">home<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">acerca de nosotros <\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">servicios<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">productos<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">contacta con nosotros<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\nLo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetar\u00e9 en ingl\u00e9s porque es una palabra muy espec\u00edfica que significa –dar suavemente con el codo<\/em>-, y no est\u00e1 de m\u00e1s agregarla a nuestro vocabulario t\u00e9cnico.<\/p>\nJQuery<\/h2>\n<script language=\"javascript\">\r\n$(document).ready(function() {\r\n\t$('a.nudge').hover(function() {\r\n\t\t$(this).animate({ paddingLeft: '35px' }, 400);\r\n\t}, function() {\r\n\t\t$(this).animate({ paddingLeft: '15px' }, 400);\r\n\t});\r\n});\r\n<\/script><\/pre>\nLocalizamos el elemento al que se la ha aplicado la regla de estilo \u00abnudge\u00bb. La clase .hover<\/a> permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando \u00abentra\u00bb y otro cuando \u00absale\u00bb. En ambos estados se aplica .animate<\/a>, a la que se le pasa como primer par\u00e1metro la regla\u00bb padding\u00bb y como segundo el tiempo en milisegundos que esta animaci\u00f3n debe durar.<\/p>\nCSS<\/h2>\n#menu_nudging{\r\n\twidth:235px;\r\n\tbackground-color: #fff;\r\n}\r\n#menu_nudging ul{\r\n\tlist-style:none;\r\n}\r\n#menu_nudging li{\r\n\tlist-style:none;\r\n\tmargin:1px 0;\r\n}\r\n#menu_nudging li a{\r\n\tlist-style:none;\r\n\tbackground: url(..\/imagenes\/efecto_nudging\/fdo_normal.gif) no-repeat;\r\n\tcolor:#fff;\r\n\ttext-transform:uppercase;\r\n\tfont-size:14px;\r\n\ttext-decoration:none;\r\n\tdisplay:block;\r\n\theight:30px;\r\n\tline-height:30px;\r\n\tpadding:0 0 0 15px;\r\n\tfont-family: Arial, Helvetica, sans-serif;\r\n\tfont-weight: bold;\r\n}\r\n#menu_nudging li a:hover{\r\n\tbackground: url(..\/imagenes\/efecto_nudging\/fdo_sobre.gif) no-repeat;\r\n\tcolor:#fff;\r\n\ttext-decoration:none;\r\n}<\/pre>\n<\/div>\n
- \n
- Inicio<\/a><\/li>\n
- Servicios <\/a><\/li>\n
- Productos<\/a><\/li>\n
- Noticias<\/a><\/li>\n
- Contactar<\/a><\/li>\n<\/ul>\n<\/div>\n
Paso 1: hacer una lista desordenada con los elementos del men\u00fa<\/h6>\n
Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetar\u00e9 en ingl\u00e9s porque es una palabra muy espec\u00edfica que significa –dar suavemente con el codo<\/em>-, y no est\u00e1 de m\u00e1s agregarla a nuestro vocabulario t\u00e9cnico.<\/p>\n
Paso 2: definimos los estilos CSS a la lista de men\u00fa<\/h6>\n
\n<\/p>\nLo quedebemos destacar del estilo es que para la etiqueta de enlace anchor (a) se modifica la imagen de fondo al poner el rat\u00f3n encima y por acci\u00f3n del script cambia tambi\u00e9n el padding original de 15px a 35px. Por supuesto, todas estas medias var\u00edan dependiendo del tama\u00f1o y forma del men\u00fa.<\/p>\n
Paso 3: aplicamos una funci\u00f3n que permitir\u00e1 los cambios de estilo<\/h6>\n
Primero localizamos el elemento al que se la ha aplicado la regla de estilo \u00abnudge\u00bb. La clase .hover<\/a> permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando \u00abentra\u00bb y otro cuando \u00absale\u00bb. En ambos estados se aplica .animate<\/a>, a la que se le pasa como primer par\u00e1metro la regla\u00bb padding\u00bb y como segundo el tiempo en milisegundos que esta animaci\u00f3n debe durar.<\/p>\n
Ver C\u00f3digo (+\/-)<\/a><\/h6>\n
\nHTML<\/h2>\n
<div id=\"menu\">\r\n\t<ul>\r\n\t\t<li><a href=\"#\" class=\"nudge\">home<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">acerca de nosotros <\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">servicios<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">productos<\/a><\/li>\r\n\t\t<li><a href=\"#\" class=\"nudge\">contacta con nosotros<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\n
Lo esencial en esta lista, es que a cada elemento debemos asignarle la clase relacionada con el efecto, que es: nudge (cuyo nombre respetar\u00e9 en ingl\u00e9s porque es una palabra muy espec\u00edfica que significa –dar suavemente con el codo<\/em>-, y no est\u00e1 de m\u00e1s agregarla a nuestro vocabulario t\u00e9cnico.<\/p>\n
JQuery<\/h2>\n
<script language=\"javascript\">\r\n$(document).ready(function() {\r\n\t$('a.nudge').hover(function() {\r\n\t\t$(this).animate({ paddingLeft: '35px' }, 400);\r\n\t}, function() {\r\n\t\t$(this).animate({ paddingLeft: '15px' }, 400);\r\n\t});\r\n});\r\n<\/script><\/pre>\nLocalizamos el elemento al que se la ha aplicado la regla de estilo \u00abnudge\u00bb. La clase .hover<\/a> permite manejar los dos estados del elemento sobre el que se pasa el raton: uno cuando \u00abentra\u00bb y otro cuando \u00absale\u00bb. En ambos estados se aplica .animate<\/a>, a la que se le pasa como primer par\u00e1metro la regla\u00bb padding\u00bb y como segundo el tiempo en milisegundos que esta animaci\u00f3n debe durar.<\/p>\n
CSS<\/h2>\n
#menu_nudging{\r\n\twidth:235px;\r\n\tbackground-color: #fff;\r\n}\r\n#menu_nudging ul{\r\n\tlist-style:none;\r\n}\r\n#menu_nudging li{\r\n\tlist-style:none;\r\n\tmargin:1px 0;\r\n}\r\n#menu_nudging li a{\r\n\tlist-style:none;\r\n\tbackground: url(..\/imagenes\/efecto_nudging\/fdo_normal.gif) no-repeat;\r\n\tcolor:#fff;\r\n\ttext-transform:uppercase;\r\n\tfont-size:14px;\r\n\ttext-decoration:none;\r\n\tdisplay:block;\r\n\theight:30px;\r\n\tline-height:30px;\r\n\tpadding:0 0 0 15px;\r\n\tfont-family: Arial, Helvetica, sans-serif;\r\n\tfont-weight: bold;\r\n}\r\n#menu_nudging li a:hover{\r\n\tbackground: url(..\/imagenes\/efecto_nudging\/fdo_sobre.gif) no-repeat;\r\n\tcolor:#fff;\r\n\ttext-decoration:none;\r\n}<\/pre>\n<\/div>\n - Servicios <\/a><\/li>\n