{"id":9509,"date":"2020-04-01T17:19:38","date_gmt":"2020-04-01T15:19:38","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=9509"},"modified":"2022-09-29T20:16:45","modified_gmt":"2022-09-29T18:16:45","slug":"como-hacer-un-menu-hamburguesa-solo-con-html-y-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/","title":{"rendered":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS"},"content":{"rendered":"<p>En el dise\u00f1o responsive es muy frecuente realizar el conocido como men\u00fa hamburguesa, el cual recibe su nombre por el relativo parecido que tiene el t\u00edpico icono con 3 barras con el famoso manjar habitual de restaurantes de comida r\u00e1pida.<\/p>\n<p>Aunque para lograr la t\u00edpica funcionalidad de estos men\u00fas se suele recurrir al uso de JavaScript, con un poco de ingenio es posible implementar uno de estos men\u00fas solo con HTML5 y CSS3.<\/p>\n<div id=\"attachment_9546\" style=\"width: 471px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9546\" class=\"size-full wp-image-9546\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/responsive.png\" alt=\"men\u00fa responsive con html y css\" width=\"461\" height=\"393\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/responsive.png 461w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/responsive-300x256.png 300w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><p id=\"caption-attachment-9546\" class=\"wp-caption-text\">men\u00fa responsive con html y css<\/p><\/div>\n<p>Antes de empezar es importante remarcar que, para este ejemplo, voy a usar la hoja de estilos <a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\" target=\"_blank\" rel=\"noopener\">reset.css<\/a> como base, y los iconos de <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a> para los dibujos que vamos a necesitar (las 3 barr\u00e1s para desplegar el men\u00fa, y el aspa para cerrar el men\u00fa). Si bien el reset.css es opcional, los iconos de Font Awesome son fundamentales para este ejemplo. Aunque el ejemplo, con los cambios adecuados, deber\u00eda de funcionar perfectamente si usas otros iconos, im\u00e1genes o elementos SVG.<\/p>\n<p>El truco para realizar la funcionalidad de este tipo de men\u00fa hamburguesa, reside en dos aspectos clave:<\/p>\n<ul>\n<li>Usar un input de tipo checkbox para saber cuando el men\u00fa est\u00e1 visible o no.<\/li>\n<li>Usar el <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/Selectores_hermanos_generales\" target=\"_blank\" rel=\"noopener\">selector de hermanos generales<\/a> para lograr que el estado del checkbox se refleje en el men\u00fa.<\/li>\n<\/ul>\n<p>La segunda condici\u00f3n tiene una importante implicaci\u00f3n, y es que resulta imprescindible que el checkbox y el men\u00fa sean hermanos en la jerarquia del HTML y, adem\u00e1s, el checbox aparezca antes en el HTML.<\/p>\n<p>Por lo que para cumplir estas condiciones el HTML que vamos a usar deberia de ser similar al siguiente:<\/p>\n<pre>&lt;div class=\"respmenu\"&gt;\r\n  &lt;input type=\"checkbox\"&gt;\r\n  &lt;i class=\"fas fa-bars\"&gt;&lt;\/i&gt;\r\n  &lt;i class=\"fas fa-times\"&gt;&lt;\/i&gt;\r\n  &lt;nav&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;Item 1&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;Item 2&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;Item 3&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;Item 4&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\"&gt;Item 5&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/nav&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Tal y como se puede observar, el input de tipo checkbox y el nav con la lista de enlaces del men\u00fa, son hermanos. Esto, como ya se ha comentado, es fundamental para despu\u00e9s lograr reflejar el estado del checkbox en la visibilidad del men\u00fa.<\/p>\n<p>Antes de entrar en detalle en el CSS que va a realizar la magia, vamos a aplicar un poquito de c\u00f3digo CSS para simplemente dar algo de aspecto al men\u00fa:<\/p>\n<pre>body {\r\n  font-family: sans-serif;\r\n}\r\n\r\n.respmenu a {\r\n  color: inherit;\r\n  text-decoration: none;\r\n  display: block;\r\n  padding: 10px 20px;\r\n  border-bottom: 2px solid #456789;\r\n  max-width: 200px;\r\n  background: #234567;\r\n  font-variant: small-caps;\r\n  text-shadow: 1px 1px black;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Y ahora vamos a ver el resto del c\u00f3digo CSS. <strong>En este c\u00f3digo vemos que aparece en varios sitios el valor 48px. Este valor viene a ser el tama\u00f1o del icono de la hamburguesa. Si lo cambiamos para hacerlo m\u00e1s grande o peque\u00f1o, debemos de cambiarlo en todos los sitios donde aparece dicho valor<\/strong>.<\/p>\n<pre>.respmenu input[type=\"checkbox\"], .respmenu .fa-bars, .respmenu .fa-times {\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n  right: 0;\r\n  top: 0;\r\n  width: 48px;\r\n  height: 48px;\r\n}\r\n\r\n.respmenu .fa-bars, .respmenu .fa-times {\r\n  font-size: 48px;\r\n  pointer-events: none;\r\n}\r\n\r\n.respmenu input[type=\"checkbox\"] {\r\n  opacity: 0;\r\n}\r\n\r\n.respmenu {\r\n  color: white;\r\n  position: relative;\r\n  background: #123456;\r\n  min-height: 48px;\r\n}\r\n\r\n.respmenu nav {\r\n  display: none;\r\n}\r\n\r\n.respmenu input:checked ~ nav {\r\n  display: block;\r\n}\r\n\r\n.respmenu input:checked ~ .fa-bars {\r\n  display: none;\r\n}\r\n\r\n.respmenu input:not(:checked) ~ .fa-times {\r\n  display: none;\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Gracias al selector de de hermanos generales (~) podemos hacer que cuando el input esta en estado <strong><em>:checked<\/em><\/strong>, se muestre el <em><strong>nav<\/strong><\/em>, y cuando no se encuentra en dicho estado, el men\u00fa se oculte. Algo similar hacemos con los iconos de <em>Font Awesome<\/em> para mostrar\/esconder el icono adecuado seg\u00fan el estado del checkbox.<\/p>\n<p>La otra parte de la magia sucede gracias a <em><strong>position: absolute;<\/strong><\/em>, que nos permite colocar los iconos justo encima del <strong><em>checkbox<\/em><\/strong>. Finalmente, con <em><strong>pointer-events: none;<\/strong> <\/em>hacemos que los iconos sean \u00abtransparentes\u00bb a los eventos del rat\u00f3n, de modo que pese a estar encima del <strong><em>checkbox<\/em><\/strong>, no van a recibir ning\u00fan click del rat\u00f3n, y por lo tanto ser\u00e1 el <em><strong>checkbox<\/strong> <\/em>el que los reciba a pesar de estar debajo de los iconos.<\/p>\n<p>Y nada m\u00e1s. Espero que este truco sobre el dise\u00f1o del men\u00fa hamburguesa os haya resultado interesante. Si es as\u00ed, seguramente tambi\u00e9n os interese saber <a href=\"https:\/\/www.espai.es\/blog\/2020\/11\/como-hacer-un-slider-solo-con-html-y-css\/\">como hacer un slider solo con HTML y CSS<\/a>. Por supuesto, tambi\u00e9n pod\u00e9is echarle un vistazo al resto de <a href=\"https:\/\/www.espai.es\/blog\/category\/diseno-web\/\">nuestros art\u00edculos<\/a> de desarrollo Web. Nos vemos en un pr\u00f3ximo art\u00edculo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el dise\u00f1o responsive es muy frecuente realizar el conocido como men\u00fa hamburguesa, el cual recibe su nombre por el relativo parecido que tiene el t\u00edpico icono con 3 barras con el famoso manjar habitual de restaurantes de comida r\u00e1pida. Aunque para lograr la t\u00edpica&#8230;<\/p>\n","protected":false},"author":23,"featured_media":9552,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[12,270,829],"class_list":["post-9509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-responsive","tag-solo-con-html-y-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-01T15:19:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-29T18:16:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS\",\"datePublished\":\"2020-04-01T15:19:38+00:00\",\"dateModified\":\"2022-09-29T18:16:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\"},\"wordCount\":624,\"commentCount\":27,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg\",\"keywords\":[\"CSS\",\"responsive\",\"solo con HTML y CSS\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\",\"name\":\"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg\",\"datePublished\":\"2020-04-01T15:19:38+00:00\",\"dateModified\":\"2022-09-29T18:16:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg\",\"width\":1000,\"height\":500,\"caption\":\"menu responsive con html y css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai","description":"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai","og_description":"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras","og_url":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2020-04-01T15:19:38+00:00","article_modified_time":"2022-09-29T18:16:45+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS","datePublished":"2020-04-01T15:19:38+00:00","dateModified":"2022-09-29T18:16:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/"},"wordCount":624,"commentCount":27,"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","keywords":["CSS","responsive","solo con HTML y CSS"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/","url":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/","name":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","datePublished":"2020-04-01T15:19:38+00:00","dateModified":"2022-09-29T18:16:45+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo hablamos sobre el dise\u00f1o responsive incluyendo el men\u00fa hamburguesa, recibe su nombre por el parecido que tiene el t\u00edpico icono con 3 barras","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","width":1000,"height":500,"caption":"menu responsive con html y css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2020\/04\/como-hacer-un-menu-hamburguesa-solo-con-html-y-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer un men\u00fa hamburguesa solo con HTML y CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/menu-responsive.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=9509"}],"version-history":[{"count":18,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9509\/revisions"}],"predecessor-version":[{"id":12261,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9509\/revisions\/12261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/9552"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=9509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=9509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=9509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}