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
$\"Imagen$
\n $\"Imagen$ <\/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>\n
Ver C\u00f3digo (+\/-)<\/a><\/h6>\n
\n
HTML<\/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>\n
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
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
La referencia para esta pr\u00e1ctica la he tomado del blog de webintenta<\/a>, al que te remito para completar la informaci\u00f3n y distrutar de alguno de sus excelentes art\u00edculos. Espero que te la hayas pasado bien por aqu\u00ed.<\/p>\n","protected":false},"excerpt":{"rendered":"
Los men\u00fas son la puerta de entrada a la web, y por eso siempre me han interesado mucho. Si un men\u00fa es soso, es como ponerle mala cara a nuestro invitado, de manera que un dise\u00f1ador debe procurar que los visitantes se sientan c\u00f3modos y sin llegar a la \u00abpedanter\u00eda\u00bb de excesos o dise\u00f1os de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,19],"tags":[20,9,23],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/273"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=273"}],"version-history":[{"count":18,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/273\/revisions\/508"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}