{"id":5939,"date":"2013-05-04T08:26:27","date_gmt":"2013-05-04T08:26:27","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5939"},"modified":"2014-11-09T20:35:38","modified_gmt":"2014-11-09T20:35:38","slug":"menu-horizontal-con-imagen-al-pasar-el-mouse","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/","title":{"rendered":"Men\u00fa horizontal con imagen al pasar el mouse"},"content":{"rendered":"

En este art\u00edculo vamos a programar desde 0 un men\u00fa horizontal que al hacer hover o pasar el rat\u00f3n por encima del elemento del men\u00fa aparezca un imagen por encima que aparentemente no est\u00e1 visible empleando para ello jQuery.<\/p>\n

\"menush\"<\/a><\/p>\n

El contenido HTML del men\u00fa deber\u00e1 ser tan simple como el siguiente\u00a0 ejemplo (una lista de elementos):<\/p>\n

<ul id=\"menu\">\r\n\u00a0\u00a0 \u00a0<li><a href=\"#\">Home<\/a><\/li>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\">Services<\/a><\/li>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul><\/pre>\n
Ahora a\u00f1adiremos un poco de maquetaci\u00f3n simple al men\u00fa en la hoja de estilos que utilices:<\/p>\n
#menu {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:100%;\r\n\u00a0\u00a0 \u00a0height:40px;\r\n\u00a0\u00a0 \u00a0background-color:#003399;\r\n\u00a0\u00a0 \u00a0z-index:9999;\r\n\u00a0\u00a0 \u00a0margin-top:40px;\r\n}\r\n\r\n#menu li {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0list-style:none;\r\n\u00a0\u00a0 \u00a0height:40px;\r\n\u00a0\u00a0 \u00a0position:relative;\r\n\u00a0\u00a0 \u00a0text-align:center;\r\n}\r\n\r\n#menu li a {\r\n\u00a0\u00a0 \u00a0background-color: #003399;\r\n\u00a0\u00a0\u00a0 color: #FFFFFF;\r\n\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 height: 30px;\r\n\u00a0\u00a0\u00a0 overflow: hidden;\r\n\u00a0\u00a0\u00a0 padding: 5px 10px;\r\n\u00a0\u00a0\u00a0 position: relative;\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n\u00a0\u00a0\u00a0 z-index: 1;\r\n}\r\n#menu li a:hover {\r\n\u00a0\u00a0 \u00a0color:#003399;\r\n\u00a0\u00a0 \u00a0background-color: #999999;\r\n\u00a0\u00a0 \u00a0text-decoration:none;\r\n}\r\n\r\n#menu li img {\r\n\u00a0\u00a0 \u00a0bottom:0px;\r\n\u00a0\u00a0 \u00a0left:0px;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0 \u00a0z-index:0;\r\n}<\/pre>\n
Y ahora faltar\u00eda hablar de la parte clave o m\u00e1s interesante del asunto. Realizar el efecto de que al pasar el rat\u00f3n por encima de uno de los elementos del men\u00fa, aparezca una imagen que aparentemente est\u00e1 escondida.<\/p>\n
En la cabecera de la p\u00e1gina que est\u00e9s utilizando deber\u00e1s a\u00f1adir la librer\u00eda jQuery + el script que realiza la operaci\u00f3n:<\/p>\n
<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(function() {\r\n\u00a0\u00a0 \u00a0$('#menu li').hover(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).find('img').animate({bottom:'35px'},{queue:false,duration:500});\r\n\u00a0\u00a0 \u00a0}, function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).find('img').animate({bottom:'0px'},{queue:false,duration:500});\r\n\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$.each($('#menu li'), function(i, l){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (i == 0)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).append('<img src=\"grey.jpg\" \/>');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0else\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).append('<img src=\"taza.png\" \/>');\r\n\u00a0\u00a0\u00a0 });\r\n});\r\n<\/script><\/pre>\n
En la primera parte del c\u00f3digo tenemos la aplicaci\u00f3n del efecto al hacer hover con el rat\u00f3n, utilizando la funci\u00f3n animate que con los par\u00e1metros que le hemos pasado lo que conseguimos es subir la imagen a 35px de su posici\u00f3n con una duraci\u00f3n de medio segundo. Al sacar el rat\u00f3n, se devuelve la imagen a su posici\u00f3n original. F\u00edjate en los estilos de las im\u00e1genes que est\u00e1n sutuadas a bottom:0px.<\/p>\n
En la segunda parte del c\u00f3digo estamos a\u00f1adiendo algo de l\u00f3gica al men\u00fa mediante un bucle. Es ampliable ya que en este caso tan solo estamos a\u00f1adiendo a cada elemento del men\u00fa una imagen.\u00a0 Estamos iterando todos los li del men\u00fa y para el primer elemento le estamos a\u00f1adiendo una imagen asociada con el nombre \u00abgrey.jpg\u00bb y para el resto \u00abtaza.png\u00bb.<\/p>\n
Podr\u00e1s ver el efecto en el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos a programar desde 0 un men\u00fa horizontal que al hacer hover o pasar el rat\u00f3n por encima del elemento del men\u00fa aparezca un imagen por encima que aparentemente no est\u00e1 visible empleando para ello jQuery. El contenido HTML del men\u00fa deber\u00e1 ser tan simple como el siguiente\u00a0 ejemplo (una lista de […]<\/p>\n","protected":false},"author":1,"featured_media":5940,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167,44],"class_list":["post-5939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos","tag-menus"],"yoast_head":"\nMen\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Men\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a programar desde 0 un men\u00fa horizontal que al hacer hover o pasar el rat\u00f3n por encima del elemento del men\u00fa aparezca un imagen por encima que aparentemente no est\u00e1 visible empleando para ello jQuery. El contenido HTML del men\u00fa deber\u00e1 ser tan simple como el siguiente\u00a0 ejemplo (una lista de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-04T08:26:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:35:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png\" \/>\n\t<meta property=\"og:image:width\" content=\"223\" \/>\n\t<meta property=\"og:image:height\" content=\"121\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/\",\"name\":\"Men\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png\",\"datePublished\":\"2013-05-04T08:26:27+00:00\",\"dateModified\":\"2014-11-09T20:35:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png\",\"width\":223,\"height\":121},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Men\u00fa horizontal con imagen al pasar el mouse\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Men\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Men\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a programar desde 0 un men\u00fa horizontal que al hacer hover o pasar el rat\u00f3n por encima del elemento del men\u00fa aparezca un imagen por encima que aparentemente no est\u00e1 visible empleando para ello jQuery. El contenido HTML del men\u00fa deber\u00e1 ser tan simple como el siguiente\u00a0 ejemplo (una lista de […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-05-04T08:26:27+00:00","article_modified_time":"2014-11-09T20:35:38+00:00","og_image":[{"width":223,"height":121,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/","url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/","name":"Men\u00fa horizontal con imagen al pasar el mouse - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png","datePublished":"2013-05-04T08:26:27+00:00","dateModified":"2014-11-09T20:35:38+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/menush.png","width":223,"height":121},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-con-imagen-al-pasar-el-mouse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Men\u00fa horizontal con imagen al pasar el mouse"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=5939"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5940"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}