Inicio<\/a><\/li>\n
Servicios<\/a><\/li>\n
Productos<\/a><\/li>\n<\/ul>\n<\/div>\n
HTML<\/h2>\n
Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla \u00abnav\u00bb.<\/p>\n
CSS<\/h2>\n
Los elementos de la navegaci\u00f3n (li) flotan a la izquierda y se les ha dado un alto de l\u00ednea equivalente al de la parte de la imagen a mostrar, para poder centrar el texto. Cada enlace se muestra en bloque.<\/p>\n
Hay que destacar que el estado hover ha sido declarado, por lo que los usuarios que no tengan activado javascript en su navegador, podr\u00e1n ver al menos la posici\u00f3n final.<\/p>\n
Se ha establecido una posici\u00f3n inicial para este fondo, de forma que funcione en los navegadores que no establecen una posici\u00f3n de forma predeterminada.<\/p>\n
Imagen<\/h2>\n
Se pueden conseguir diferentes efectos variando el formato y el movimiento de la imagen. En este caso se desplazar\u00e1 hacia arriba hasta mostrar la banda decorativa que est\u00e1 en la parte inferior y que servir\u00e1 adem\u00e1s de marcador. Esta configuraci\u00f3n se repetira tambi\u00e9n para el elemento activo.<\/p>\n
$\"Imagen$ <\/p>\n
Fig. 1: Imagen de Fondo<\/strong><\/p>\n
El antes y el despu\u00e9s para la imagen de la Fig. 1, se consigue con un desplazamiento vertical de 79 pixeles, lo que corresponde a la mitad de su altura. De manera predeterminada en la hoja de estilos, la banda inferior permanecer\u00e1 oculta hasta que el usuario pase el rat\u00f3n sobre el enlace.<\/p>\n
Script<\/h2>\n
Finalmente, el script es muy simple: la imagen del fondo debe moverse cuando el usuario pasa el rat\u00f3n por encima, variando su posici\u00f3n. Los eventos implicados son \u00abmouseover\u00bb y \u00abmouseout\u00bb.<\/p>\n
Hay que destacar en esta funci\u00f3n que cada animaci\u00f3n es detenida antes de su comienzo, y con esto se evitan comportamientos inapropiados o repeticiones innecesarias que se producen cuando el rat\u00f3n pasa repetidas veces por un enlace. jQuery tambi\u00e9n tiene un m\u00e9todo .hover<\/a> que puede ser utilizado para simplificar el script.<\/p>\n
Por \u00faltimo, hay que recordar que es necesario, adem\u00e1s de la propia librer\u00eda jquery<\/strong>, el plugin Background-Position<\/a> que permite estos movimientos de la imagen de fondo. Ambos ficheros deben ser enlazados de la manera habitual en la cabecera del documento.<\/p>\n
Ver C\u00f3digo (+\/-)<\/a><\/h6>\n
\n
HTML<\/h2>\n
\r\n<ul id=\"nav\">\r\n<li><a href=\"#\">Inicio<\/a><\/li>\r\n<li><a href=\"#\">Servicios<\/a><\/li>\r\n<li><a href=\"#\">Productos<\/a><\/li>\r\n<li><a href=\"#\">Contactar<\/a><\/li>\r\n<\/ul><\/pre>\n
CSS<\/h2>\n
\/*\r\n --- Animaci\u00f3n de Imagen de Fondo en Menu ---\r\n*\/\r\n\r\n#animar_fondo ul {\r\n\tlist-style:none;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\theight:79px;\r\n}\r\n\r\n#animar_fondo li {\r\n\tfloat:left;\r\n\twidth:153px;\r\n\theight:79px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n\ttext-align:center;\r\n\tline-height:79px;\r\n}\r\n#animar_fondo li a {\r\n\tdisplay:block;\r\n\tcolor:#d4b596;\r\n\ttext-decoration:none;\r\n}\r\n#animar_fondo li a {\r\n\tbackground-image: url(..\/imagenes\/animar_fondo\/menu_fondo.jpg);\r\n\tbackground-repeat: repeat;\r\n\tbackground-position: 0 0;\r\n}\r\n#animar_fondo li a:hover {\r\n\tbackground-position:0px -79px;\r\n}<\/pre>\n
JQuery<\/h2>\n
\/*\r\n--- Animaci\u00f3n de Imagen de Fondo en Menu\r\n*\/\r\n\r\n$(function(){\r\n\t$('#nav a')\r\n\t\t.css( {backgroundPosition: \"0 0\"} )\r\n\t\t.mouseover(function(){\r\n\t\t\t$(this).stop().animate({backgroundPosition:\"(0 -79px)\"}, {duration:500})\r\n\t\t})\r\n\t\t.mouseout(function(){\r\n\t\t\t$(this).stop().animate({backgroundPosition:\"(0 0)\"}, {duration:200, complete:function(){\r\n\t\t\t\t$(this).css({backgroundPosition: \"0 0\"})\r\n\t\t\t}})\r\n\t\t})\r\n});<\/pre>\n<\/div>\n
La referencia para esta pr\u00e1ctica la he tomado del blog de Jonathan Snook aqu\u00ed<\/a>. Espero que hayas disfrutado del tutorial y que te haya sido de utiliad. Que tengas un buen d\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"
Lo que sique es una continuaci\u00f3n del efecto "nudging", que vimos anteriormente. En este caso animaremos el fondo como sol\u00edamos hacer en flash, con la ventaja de que ahora ganamos un poco en accesibilidad. Ej. 1: animaci\u00f3n vertical Inicio Servicios Productos HTML Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado […]<\/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":[29,30],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/279"}],"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=279"}],"version-history":[{"count":16,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":592,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/279\/revisions\/592"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

HTML<\/h2>\nPartimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla \u00abnav\u00bb.<\/p>\n

Ver C\u00f3digo (+\/-)<\/a><\/h6>\n\nHTML<\/h2>\n\r\n<ul id=\"nav\">\r\n<li><a href=\"#\">Inicio<\/a><\/li>\r\n<li><a href=\"#\">Servicios<\/a><\/li>\r\n<li><a href=\"#\">Productos<\/a><\/li>\r\n<li><a href=\"#\">Contactar<\/a><\/li>\r\n<\/ul><\/pre>\n

HTML<\/h2>\n\r\n<ul id=\"nav\">\r\n<li><a href=\"#\">Inicio<\/a><\/li>\r\n<li><a href=\"#\">Servicios<\/a><\/li>\r\n<li><a href=\"#\">Productos<\/a><\/li>\r\n<li><a href=\"#\">Contactar<\/a><\/li>\r\n<\/ul><\/pre>\n

HTML<\/h2>\n
Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla \u00abnav\u00bb.<\/p>\n