{"id":202,"date":"2009-07-09T22:54:43","date_gmt":"2009-07-09T20:54:43","guid":{"rendered":"http:\/\/www.davidrojas.net\/?p=202"},"modified":"2009-11-01T10:38:49","modified_gmt":"2009-11-01T08:38:49","slug":"menu-animado-desplegable-con-css-y-jquery","status":"publish","type":"post","link":"https:\/\/www.davidrojas.net\/index.php\/diseno-web\/menu-animado-desplegable-con-css-y-jquery\/","title":{"rendered":"Men\u00fa animado desplegable con CSS y jquery"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.davidrojas.net\/wp-content\/uploads\/2009\/07\/menu_desplegable.png\" alt=\"menu_desplegable\" title=\"menu_desplegable\" width=\"200\" height=\"120\" class=\"derecha alignright size-full wp-image-211\" \/>Tras el inesperado \u00e9xito de mi art\u00edculo <a href=\"http:\/\/www.davidrojas.net\/index.php\/diseno-web\/menu-animado-con-css-y-jquery\/\">Men\u00fa animado con CSS y jquery<\/a>, me he decidido a escribir un nuevo tutorial sobre creaci\u00f3n de men\u00fas: c\u00f3mo hacer un men\u00fa horizontal animado desplegable con CSS y jquery. Cada elemento del men\u00fa horizontal contendr\u00e1 un submen\u00fa vertical que se desplegar\u00e1 con una animaci\u00f3n. A su vez, al pasar el rat\u00f3n sobre cada entrada del submen\u00fa \u00e9ste cambiar\u00e1 de color de forma gradual. El resultado lo puedes ver aqu\u00ed: <em style=\"border-bottom:1px dotted #C00202;\"><a href=\"http:\/\/www.davidrojas.net\/demos\/menu_desplegable.html\" target=\"_blank\">Ver demo<\/a><\/em><br \/>\n<!--more--><\/p>\n<h3>Im\u00e1genes<\/h3>\n<p>La \u00fanica imagen que vamos a utilizar es este gradiente para el fondo de los submen\u00fas, que adem\u00e1s del efecto relieve que proporciona, nos ayudar\u00e1 a realizar las transiciones del hover.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgpost alignnone size-full wp-image-94\" title=\"menu_desplegable\" src=\"http:\/\/www.davidrojas.net\/demos\/fondo_menu_desplegable.png\" alt=\"fondo_menu\" width=\"5\" height=\"125\" \/><\/p>\n<h3>HTML<\/h3>\n<p>El html empleado es una simple lista con otra lista anidada para cada submen\u00fa:<\/p>\n<pre lang=\"html4strict\">\r\n<ul id=\"nav\">\r\n\t<li><a href=\"#\">Menu 1<\/a>\r\n\t\t<ul class=\"submenu\">\r\n\t\t\t<li><a href=\"#\">Submenu 1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li><a href=\"#\">Menu 2<\/a>\r\n\t\t<ul class=\"submenu\">\r\n\t\t\t<li><a href=\"#\">Submenu 1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li><a href=\"#\">Menu 3<\/a>\r\n\t\t<ul class=\"submenu\">\r\n\t\t\t<li><a href=\"#\">Submenu 1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li><a href=\"#\">Menu 4<\/a>\r\n\t\t<ul class=\"submenu\">\r\n\t\t\t<li><a href=\"#\">Submenu 1<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 2<\/a><\/li>\r\n\t\t\t<li><a href=\"#\">Submenu 3<\/a><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n<\/ul>\r\n<\/pre>\n<h3>A\u00f1adiendo el CSS<\/h3>\n<p>La mayor parte del css son para mejorar el aspecto visual del men\u00fa. Funcionalmente, podemos destacar varias cosas. Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el men\u00fa horizontal, y tienen <em>position: relative<\/em> para que sirva de referencia a cada submen\u00fa. A la lista del submen\u00fa le asignamos <em>position: absolute<\/em>, para que cuando se despliegue est\u00e9 situada bajo su men\u00fa correspondiente. Este submen\u00fa lo ocultamos por defecto con <em>display: none<\/em> para despu\u00e9s mostrarlo con javascript cuando pasemos el rat\u00f3n por encima de su men\u00fa padre. A cada enlace del elemento del submen\u00fa a\u00f1adiremos la imagen del gradiente como <em>background<\/em>.<\/p>\n<pre lang=\"css\">\r\na{\r\ndisplay: block;\r\ntext-decoration: none;\r\ncolor: #004a80;\r\npadding: 5px;\r\n}\r\n\t\t\r\nul{\r\nwidth: 500px;\r\nheight: 28px;\r\n}\r\n\r\nul,li{\r\nlist-style: none;\r\nmargin:0;\r\npadding:0;\r\n}\r\n\r\n#nav{\r\nfont-family: 'Century Gothic', sans-serif;\r\n}\r\n\t\t\r\n#nav li{\r\nfloat:left;\r\nposition: relative;\r\nwidth: 125px;\r\nfont-size: 14px;\r\nfont-variant: small-caps;\r\nborder-top:1px solid #004a80;\r\nborder-bottom:1px solid #004A80;\r\n}\r\n\t\t\r\n.submenu{\r\ndisplay: none;\r\nposition: absolute;\r\nleft: -1px;\r\nborder:none;\r\nheight: auto;\r\nbackground: none;\r\n}\r\n\t\t\r\n#nav .submenu li{\r\nfloat: none;\r\nposition: static;\r\nmargin: 0;\r\nfont-size: 11px;\r\nfont-variant: normal;\r\nborder: 1px solid #004a80;\r\nborder-top: none;\r\nwidth: 124px;\r\n}\r\n\t\t\r\n#nav .submenu li a{\r\ncolor: #FFFFFF;\r\nbackground: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;\r\nwidth: 114px;\r\nheight: 16px;\r\n}\r\n<\/pre>\n<h3>Javascript y jQuery<\/h3>\n<p>Ahora a\u00f1adiremos la funcionalidad del men\u00fa. Para ello necesitaremos primero incluir la librer\u00eda jQuery, que podemos hacerlo carg\u00e1ndola directamente desde el repositorio de Google:<\/p>\n<pre lang=\"html4strict\">\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3\/jquery.min.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n<\/pre>\n<p>Tambi\u00e9n necesitaremos a\u00f1adir el <a href=\"http:\/\/plugins.jquery.com\/project\/backgroundPosition-Effect\" rel=\"nofollow\">plugin backgroundPosition<\/a> para jQuery, ya que \u00e9ste no soporta de serie la animaci\u00f3n de la propiedad <em>background-position<\/em>. Lo descargaremos y a\u00f1adiremos as\u00ed:<\/p>\n<pre lang=\"html4strict\">\r\n<script type=\"text\/javascript\" src=\"jquery.backgroundPosition.js\"><\/script>\r\n<\/pre>\n<p>Finalmente, con unas pocas l\u00edneas de c\u00f3digo, usando la funci\u00f3n <em>slideDown\/slideUp<\/em> y el evento <em>hover<\/em> mostraremos el submen\u00fa correspondiente cuando pasemos el rat\u00f3n por uno de los elementos del men\u00fa principal. Usando la funci\u00f3n <em>animate<\/em>, al pasar el rat\u00f3n por encima de cada entrada del submen\u00fa se cambiar\u00e1 la propiedad <em>background-position<\/em>, deslizando la imagen del gradiente y creando un efecto de fundido r\u00e1pido, para que la transici\u00f3n sea m\u00e1s suave que si utiliz\u00e1ramos simplemente <em>a:hover<\/em> para cambiar el color de fondo del enlace activo.<\/p>\n<pre lang=\"javascript\">\r\n<script type=\"text\/javascript\">\r\n$(function(){\r\n\t$('#nav>li').hover(\r\n\t\tfunction(){\r\n\t\t$('.submenu',this).stop(true,true).slideDown('fast');\r\n\t\t},\r\n\t\tfunction(){\r\n\t\t$('.submenu',this).slideUp('fast');\r\n\t\t}\r\n\t);\r\n\t\t\t\r\n\t$('.submenu li a').css( {backgroundPosition: \"0px 0px\"} ).hover(\r\n\t\tfunction(){\r\n\t\t$(this).stop().animate({backgroundPosition: \"(0px -99px)\"}, 250);\r\n\t\t},\r\n\t\tfunction(){\r\n\t\t$(this).stop().animate({backgroundPosition: \"(0px 0px)\"}, 250);\r\n\t\t}\r\n\t);\t\t\t\r\n});\r\n<\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tras el inesperado \u00e9xito de mi art\u00edculo Men\u00fa animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creaci\u00f3n de men\u00fas: c\u00f3mo hacer un men\u00fa horizontal animado desplegable con CSS y jquery. Cada elemento del men\u00fa horizontal contendr\u00e1 un submen\u00fa vertical que se desplegar\u00e1 con una animaci\u00f3n. A su vez, al [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9,3,5],"tags":[],"class_list":["post-202","post","type-post","status-publish","format-standard","hentry","category-css","category-desarrollo-web","category-diseno-web","category-jquery"],"_links":{"self":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":45,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":451,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/202\/revisions\/451"}],"wp:attachment":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}