{"id":5934,"date":"2013-05-10T22:13:48","date_gmt":"2013-05-10T22:13:48","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5934"},"modified":"2019-04-08T10:11:57","modified_gmt":"2019-04-08T10:11:57","slug":"menu-dropdown-me-tipo-facebook-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/","title":{"rendered":"Men\u00fa Dropdown Me tipo Facebook con jQuery"},"content":{"rendered":"<p>En este art\u00edculo vamos a ver como crear un men\u00fa dropdown tipo facebook con jQuery. Al hacer click en los elementos principales aparecer\u00e1 un submen\u00fa escondido con m\u00e1s links.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5956\" alt=\"dropdown-me\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me.png\" width=\"993\" height=\"386\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me.png 993w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me-300x116.png 300w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/a><\/p>\n<p>Para\u00a0 a\u00f1adir este men\u00fa en tu p\u00e1gina Web deber\u00e1s a\u00f1adir los tags html all\u00ed donde lo quieras visualizar. El c\u00f3digo ser\u00eda el siguiente:<\/p>\n<pre>\u00a0\u00a0\u00a0 &lt;div id=\"menu\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li id=\"dropdown1\"&gt;&lt;a href=\"#\"&gt;Dropdown 1&lt;\/a&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 11&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 12&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li id=\"dropdown2\"&gt;&lt;a href=\"#\"&gt;Dropdown 2&lt;\/a&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 21&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 22&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 32&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 42&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 52&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li id=\"dropdown3\"&gt;&lt;a href=\"#\"&gt;Dropdown 3&lt;\/a&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;ul class=\"dropdown-menu\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 31&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 32&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"#\"&gt;Dropdown 33&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0\u00a0 &lt;\/div&gt;<\/pre>\n<p>Ahora en tu hoja de estilos a\u00f1ade las siguientes clases para conseguir el mismo dise\u00f1o del ejemplo en funcionamiento:<\/p>\n<pre>#menu {\r\n\u00a0\u00a0\u00a0 background-color: #2C2C2C;\r\n\u00a0\u00a0\u00a0 background-image: -moz-linear-gradient(center top , #333333, #222222);\r\n\u00a0\u00a0\u00a0 background-repeat: repeat-x;\r\n\u00a0\u00a0\u00a0 border-radius: 4px 4px 4px 4px;\r\n\u00a0\u00a0\u00a0 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;\r\n\u00a0\u00a0\u00a0 min-height: 40px;\r\n\u00a0\u00a0\u00a0 padding-left: 20px;\r\n\u00a0\u00a0\u00a0 padding-right: 20px;\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:940px;\r\n}\r\n\r\n#menu ul {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:100%;\r\n\u00a0\u00a0 \u00a0padding:0px;\r\n}\r\n\r\n#menu ul li {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0position:relative;\r\n\u00a0\u00a0 \u00a0list-style:none;\r\n}\r\n\r\n#menu ul li a {\r\n\u00a0\u00a0 \u00a0color: #999999;\r\n\u00a0\u00a0\u00a0 float: none;\r\n\u00a0\u00a0\u00a0 line-height: 19px;\r\n\u00a0\u00a0\u00a0 padding: 9px 10px 11px;\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n\u00a0\u00a0\u00a0 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n\r\n#menu ul li a:hover {\r\n\u00a0\u00a0 \u00a0color: #ffffff;\r\n}\r\n\r\n#menu .dropdown-menu {\r\n\u00a0\u00a0\u00a0 display: none;\r\n\u00a0\u00a0\u00a0 left: 10px;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 top:35px;\r\n\u00a0\u00a0 \u00a0width:140px;\r\n\u00a0\u00a0 \u00a0background-color:#FFFFFF;\r\n\u00a0\u00a0 \u00a0border-radius:5px;\r\n\u00a0\u00a0 \u00a0border:1px solid #333333;\r\n\u00a0\u00a0 \u00a0box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n#menu .dropdown-menu:after {\r\n\u00a0\u00a0\u00a0 border-bottom: 6px solid #FFFFFF;\r\n\u00a0\u00a0\u00a0 border-left: 6px solid transparent;\r\n\u00a0\u00a0\u00a0 border-right: 6px solid transparent;\r\n\u00a0\u00a0\u00a0 content: \"\";\r\n\u00a0\u00a0\u00a0 left: 10px;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 top: -6px;\r\n}\r\n\r\n.dropdown-menu li {\r\n\u00a0\u00a0 \u00a0float:left;\r\n\u00a0\u00a0 \u00a0width:100%;\r\n\u00a0\u00a0 \u00a0list-style:none;\r\n}\r\n\r\n.dropdown-menu li a {\r\n\u00a0\u00a0\u00a0 clear: both;\r\n\u00a0\u00a0\u00a0 color: #333333;\r\n\u00a0\u00a0\u00a0 display: block;\r\n\u00a0\u00a0\u00a0 font-weight: normal;\r\n\u00a0\u00a0\u00a0 line-height: 18px;\r\n\u00a0\u00a0\u00a0 padding: 3px 15px;\r\n\u00a0\u00a0\u00a0 white-space: nowrap;\r\n}\r\n.dropdown-menu li a:hover {\r\n\u00a0\u00a0\u00a0 color: #ffffff;\r\n\u00a0\u00a0 \u00a0background-color:#333333;\r\n}<\/pre>\n<p>Y ahora solo falta a\u00f1adir la clave del asunto. Lo puedes hacer tanto dentro del &lt;head&gt; de tu p\u00e1gina o antes de la etiqueta de cierre &lt;\/html&gt;:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$('#menu li a').click(function(){\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0 \u00a0$('.dropdown-menu').hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var parent = $(this).parent().attr('id');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if ($('#'+parent+' .dropdown-menu').is (':hidden'))\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#'+parent+' .dropdown-menu').show();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 else\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#'+parent+' .dropdown-menu').hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0$('body,html').click(function(){\r\n\u00a0\u00a0 \u00a0 \u00a0\u00a0 \u00a0$('.dropdown-menu').hide();\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n&lt;\/script&gt;<\/pre>\n<p>Al hacer click en uno de los links principales del men\u00fa, mostramos su correspondiente men\u00fa dropdown, que no es m\u00e1s que una lista de elementos que inicialmente est\u00e1 no visible. Con la condici\u00f3n estamos controlando si el men\u00fa dropdown est\u00e1 visible en ese momento o no para mostrarlo o ocultarlo.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/menu-dropdown-me\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver ejemplo en funcionamiento <\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/menu-dropdown-me\/slide.html\" target=\"_blank\" rel=\"noopener noreferrer\">Ver ejemplo con efecto slideUp y slideDown en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver como crear un men\u00fa dropdown tipo facebook con jQuery. Al hacer click en los elementos principales aparecer\u00e1 un submen\u00fa escondido con m\u00e1s links. Para\u00a0 a\u00f1adir este men\u00fa en tu p\u00e1gina Web deber\u00e1s a\u00f1adir los tags html all\u00ed donde lo quieras visualizar. El c\u00f3digo ser\u00eda el siguiente: \u00a0\u00a0\u00a0 &lt;div id=\u00bbmenu\u00bb&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[44],"class_list":["post-5934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-menus"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Men\u00fa Dropdown Me tipo Facebook con jQuery - 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 Dropdown Me tipo Facebook con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a ver como crear un men\u00fa dropdown tipo facebook con jQuery. Al hacer click en los elementos principales aparecer\u00e1 un submen\u00fa escondido con m\u00e1s links. Para\u00a0 a\u00f1adir este men\u00fa en tu p\u00e1gina Web deber\u00e1s a\u00f1adir los tags html all\u00ed donde lo quieras visualizar. El c\u00f3digo ser\u00eda el siguiente: \u00a0\u00a0\u00a0 &lt;div id=&quot;menu&quot;&gt; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/\" \/>\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-10T22:13:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-08T10:11:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"320\" \/>\n\t<meta property=\"og:image:height\" content=\"284\" \/>\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=\"3 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-dropdown-me-tipo-facebook-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/\",\"name\":\"Men\u00fa Dropdown Me tipo Facebook con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png\",\"datePublished\":\"2013-05-10T22:13:48+00:00\",\"dateModified\":\"2019-04-08T10:11:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png\",\"width\":320,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Men\u00fa Dropdown Me tipo Facebook con jQuery\"}]},{\"@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 Dropdown Me tipo Facebook con jQuery - 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 Dropdown Me tipo Facebook con jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a ver como crear un men\u00fa dropdown tipo facebook con jQuery. Al hacer click en los elementos principales aparecer\u00e1 un submen\u00fa escondido con m\u00e1s links. Para\u00a0 a\u00f1adir este men\u00fa en tu p\u00e1gina Web deber\u00e1s a\u00f1adir los tags html all\u00ed donde lo quieras visualizar. El c\u00f3digo ser\u00eda el siguiente: \u00a0\u00a0\u00a0 &lt;div id=\"menu\"&gt; [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-05-10T22:13:48+00:00","article_modified_time":"2019-04-08T10:11:57+00:00","og_image":[{"width":320,"height":284,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/","name":"Men\u00fa Dropdown Me tipo Facebook con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png","datePublished":"2013-05-10T22:13:48+00:00","dateModified":"2019-04-08T10:11:57+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/dropdown-me2.png","width":320,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-dropdown-me-tipo-facebook-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Men\u00fa Dropdown Me tipo Facebook con jQuery"}]},{"@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\/5934","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=5934"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5934\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5957"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}