{"id":1164,"date":"2011-11-27T15:11:44","date_gmt":"2011-11-27T15:11:44","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1164"},"modified":"2019-03-03T07:16:39","modified_gmt":"2019-03-03T07:16:39","slug":"menu-horizontal-css-query","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/","title":{"rendered":"Men\u00fa horizontal con CSS y jQuery"},"content":{"rendered":"<p>En este art\u00edculo vamos a echar un vistazo y ver lo que podemos lograr con HTML5 y CSS3 en relaci\u00f3n a los men\u00fas desplegables de navegaci\u00f3n. Tambi\u00e9n vamos a usar jQuery para manejar los efectos y a\u00f1adir los retoques finales.<\/p>\n<p>HTML5 lleva a la especificaci\u00f3n de un elemento &lt;nav&gt; dedicado que se debe utilizar como contenedor de una estructura de navegaci\u00f3n m\u00e1s importante, como los men\u00fas de navegaci\u00f3n principal vertical u horizontal del sitio, o una tabla en la p\u00e1gina de contenidos, por ejemplo. Internet Explorer por desgracia no es compatible con este nuevo elemento, sin embargo hay una soluci\u00f3n sencilla que podemos usar, de los cuales estoy seguro de que todos somos conscientes.<\/p>\n<p>Con CSS3 podemos acabar con lo que habr\u00eda requerido el uso de muchas im\u00e1genes y, posiblemente, un contenedor de embalaje adicional o dos y dependen de (casi) \u00fanicamente en algunas de las propiedades de estilo nuevo, como las esquinas redondeadas y sombras, por ejemplo, que est\u00e1n disponibles para los navegadores que soporten. Una vez m\u00e1s, no todos los navegadores. El apoyo a estas nuevas reglas, pero podemos muy f\u00e1cilmente dar vuelta la ca\u00edda de soluciones para los navegadores que no pueden manejar nuestros estilos.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1170\" title=\"nav\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\" alt=\"\" width=\"744\" height=\"274\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png 744w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav-300x110.png 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/menu-horizontal\/\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a echar un vistazo y ver lo que podemos lograr con HTML5 y CSS3 en relaci\u00f3n a los men\u00fas desplegables de navegaci\u00f3n. Tambi\u00e9n vamos a usar jQuery para manejar los efectos y a\u00f1adir los retoques finales. HTML5 lleva a la especificaci\u00f3n de un elemento &lt;nav&gt; dedicado que se debe utilizar como [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,5],"tags":[44],"class_list":["post-1164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","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 horizontal con CSS y 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 horizontal con CSS y jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a echar un vistazo y ver lo que podemos lograr con HTML5 y CSS3 en relaci\u00f3n a los men\u00fas desplegables de navegaci\u00f3n. Tambi\u00e9n vamos a usar jQuery para manejar los efectos y a\u00f1adir los retoques finales. HTML5 lleva a la especificaci\u00f3n de un elemento &lt;nav&gt; dedicado que se debe utilizar como [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/\" \/>\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=\"2011-11-27T15:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-03T07:16:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\" \/>\n\t<meta property=\"og:image:width\" content=\"744\" \/>\n\t<meta property=\"og:image:height\" content=\"274\" \/>\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=\"1 minuto\" \/>\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-css-query\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/\",\"name\":\"Men\u00fa horizontal con CSS y jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\",\"datePublished\":\"2011-11-27T15:11:44+00:00\",\"dateModified\":\"2019-03-03T07:16:39+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png\",\"width\":744,\"height\":274},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Men\u00fa horizontal con CSS y 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 horizontal con CSS y 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 horizontal con CSS y jQuery - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a echar un vistazo y ver lo que podemos lograr con HTML5 y CSS3 en relaci\u00f3n a los men\u00fas desplegables de navegaci\u00f3n. Tambi\u00e9n vamos a usar jQuery para manejar los efectos y a\u00f1adir los retoques finales. HTML5 lleva a la especificaci\u00f3n de un elemento &lt;nav&gt; dedicado que se debe utilizar como [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-11-27T15:11:44+00:00","article_modified_time":"2019-03-03T07:16:39+00:00","og_image":[{"width":744,"height":274,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.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":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/","url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/","name":"Men\u00fa horizontal con CSS y jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png","datePublished":"2011-11-27T15:11:44+00:00","dateModified":"2019-03-03T07:16:39+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/11\/nav.png","width":744,"height":274},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-css-query\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Men\u00fa horizontal con CSS y 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\/1164","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=1164"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/1170"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}