![\"menu1\"](\"https:\/\/www.pcpolis.es\/blog\/imagenes\/menus\/menu1.jpg\")
<\/a><\/div>\n![\"menu2\"](\"https:\/\/www.pcpolis.es\/blog\/imagenes\/menus\/menu2.jpg\")
<\/a><\/div>\n![\"menu3\"](\"https:\/\/www.pcpolis.es\/blog\/imagenes\/menus\/menu3.jpg\")
<\/a><\/div>\n<\/div>\nHTML<\/h2>\n
Un div contenedor (#menu_hor) y otros tantos div(#menu1, #menu2 y #menu3) como elementos de men\u00fa se quiera.<\/p>\n
CSS<\/h2>\n
Es importante que el div contenedor (#menu_hor) tenga asignada una posici\u00f3n relativa, de esa manera al asignarle una posici\u00f3n absoluta a los tres menus interiores, su posici\u00f3n ser\u00e1 con respecto a este div. Otra propiedad importante sera que el desbordamiento sea oculto, para que \u00fanicamente muestre aquella parte de las imagenes que nos interesa. Sus medidas dependeran de las imagenes que se utilicen.<\/p>\n
Para los elementos del men\u00fa, la clase que apliquemos servir\u00e1 de referenencia para ejecutar los cambios con javascript. Aqu\u00ed lo importante es su posicionamiento, que debe ser absoluto, y su ubicaci\u00f3n dentro del contenedor, que depender\u00e1 de cada elemento: left:0px, left:40px y left:80px. De esa forma se muestran las leyendas situadas en el extremo izquierdo.<\/p>\n
JQuery<\/h2>\n
La clase JavaScript necesaria para conseguir este efecto es .animate()<\/a>, su sintaxis es la siguiente:<\/p>\n .animate( properties, [ duration ], [ easing ], [ callback ] )<\/strong><\/span><\/p>\n y la funci\u00f3n clave ser\u00eda la siguiente:<\/p>\n El resto del script, que puedes ver a continuaci\u00f3n en la secci\u00f3n de c\u00f3digo, es una variaci\u00f3n de esta primera parte, combin\u00e1ndola como se desee que ocurran las transiciones en el resto de elementos del men\u00fa.<\/p>\n$(document).ready(function(){\r\n\r\n\t\/* menu1 *\/\r\n\t$(\"#menu1\").mouseover(function(){\r\n $(\".bloque2\").animate({\"left\": \"440px\"}, \"slow\");\r\n\t $(\".bloque3\").animate({\"left\": \"480px\"}, \"slow\");\r\n });\r\n});<\/pre>\n\n
Ver C\u00f3digo(+\/-)<\/a><\/h6>\n
\r\n\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\r\n<script src=\"https:\/\/www.pcpolis.es\/blog\/scripts\/jquery-1.4.2.min.js\" type=\"text\/javascript\"><\/script>\r\n\r\n<script>\r\n$(document).ready(function(){\r\n\r\n\/* menu1 *\/\r\n$(\"#menu1\").mouseover(function(){\r\n$(\".bloque2\").animate({\"left\": \"440px\"}, \"slow\");\r\n$(\".bloque3\").animate({\"left\": \"480px\"}, \"slow\");\r\n});\r\n\r\n\/* menu2 *\/\r\n$(\"#menu2\").mouseover(function(){\r\n$(\".bloque2\").animate({\"left\": \"40px\"}, \"slow\");\r\n$(\".bloque3\").animate({\"left\": \"480px\"}, \"slow\");\r\n});\r\n\r\n\/* menu3 *\/\r\n$(\"#menu3\").mouseover(function(){\r\n$(\".bloque3\").animate({\"left\": \"80px\"}, \"slow\");\r\n$(\".bloque2\").animate({\"left\": \"40px\"}, \"slow\");\r\n});\r\n\r\n});\r\n<\/script>\r\n<style>\r\nimg {\r\nborder:none;\r\n}\r\n\r\n#contenedor {\r\nwidth:520px;\r\nbackground-color: #999999;\r\nheight:250px;\r\noverflow:hidden;\r\nposition:relative;\r\n}\r\n\r\n.bloque1 {\r\nbackground-color:#757C08;\r\nleft:0px;\r\nwidth:440px;\r\nheight:250px;\r\nmargin:0px;\r\ntop: 0px;\r\nposition:absolute;\r\n}\r\n\r\n.bloque2 {\r\nbackground-color:#6F8C94;\r\nleft:440px;\r\nwidth:440px;\r\nheight:250px;\r\nmargin:0px;\r\ntop: 0px;\r\nposition:absolute;\r\n}\r\n\r\n.bloque3 {\r\nbackground-color:#782748;\r\nleft:480px;\r\nwidth:440px;\r\nheight:250px;\r\nmargin:0px;\r\ntop: 0px;\r\nposition:absolute;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"contenedor\">\r\n