- \n
- 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](\"https:\/\/www.pcpolis.es\/blog\/wp-content\/upLoads\/2010\/08\/menu_fondo.jpg\")
<\/p>\nFig. 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
\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
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>\nJQuery<\/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 - Servicios<\/a><\/li>\n