{"id":833,"date":"2018-10-02T10:27:32","date_gmt":"2018-10-02T08:27:32","guid":{"rendered":"https:\/\/www.benjaminsimier.com\/codepen-les-menus-burger-sur-internet\/"},"modified":"2019-11-07T11:47:53","modified_gmt":"2019-11-07T10:47:53","slug":"codepen-burger-menus-on-internet","status":"publish","type":"post","link":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/","title":{"rendered":"#CodePen : Burger menus \u2026 ON INTERNET"},"content":{"rendered":"\n<p>As you may have noticed, there are more and more burger menus on the websites. Previously use only for mobile versions, they are gradually appearing on the website desktop version (pc).<br>Some say that this menu system for PC versions is not appropriate, others say that the system is very good \u2026 For my part, I do not really opinion. Two or three years ago I will have said that they are not appropriate but finally by dint of seeing them everywhere it is done and in a few years (or even a few months) it will be normal to see them on all sites.<br><strong>And you, what do you think of these menus for desktop versions of websites?<\/strong><\/p>\n\n\n\n<p>This month, I propose you a CodePen selection of burger menus.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>THE real burger menu, it\u2019s him<\/h2>\n\n\n\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='VvWqgP' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen SVG Burger Menu by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2>Classic but effective<\/h2>\n\n\n\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='Alayb' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen SVG CSS3 Menu \/ Burger Button by Kyle Henwood (@kylehenwood) on CodePen.<\/p>\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>This is a burger?<\/h2>\n\n\n\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='GpWbzW' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen SVG Hotdog Menu by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>\u2026 And this one?<\/h2>\n\n\n\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='epWOKE' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen SVG Pizza Menu by Chris Gannon (@chrisgannon) on CodePen.<\/p>\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>And finally, great animations<\/h2>\n\n\n\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='rzbYQv' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Jellybo menu burgers by Mat\u00fa\u0161 (@Trnkus) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>As you may have noticed, there are more and more burger menus on the websites. Previously use only for mobile versions, they are gradually appearing on the website desktop version (pc).Some say that this menu system for PC versions is not appropriate, others say that the system is very good \u2026 For my part, I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[50],"tags":[54,76],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.8 (Yoast SEO v20.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>#CodePen : Burger menus \u2026 ON INTERNET - Benjamin Simier<\/title>\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.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"#CodePen : Burger menus \u2026 ON INTERNET\" \/>\n<meta property=\"og:description\" content=\"As you may have noticed, there are more and more burger menus on the websites. Previously use only for mobile versions, they are gradually appearing on the website desktop version (pc).Some say that this menu system for PC versions is not appropriate, others say that the system is very good \u2026 For my part, I [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Simier\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-02T08:27:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-07T10:47:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/codepen_menu-burger_22e154bc4650fdb44a9a12f9c8bf13dd.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"751\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Benjamin Simier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Simier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\"},\"author\":{\"name\":\"Benjamin Simier\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"headline\":\"#CodePen : Burger menus \u2026 ON INTERNET\",\"datePublished\":\"2018-10-02T08:27:32+00:00\",\"dateModified\":\"2019-11-07T10:47:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\"},\"wordCount\":291,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"keywords\":[\"codepen\",\"web\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\",\"url\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\",\"name\":\"#CodePen : Burger menus \u2026 ON INTERNET - Benjamin Simier\",\"isPartOf\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#website\"},\"datePublished\":\"2018-10-02T08:27:32+00:00\",\"dateModified\":\"2019-11-07T10:47:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.benjaminsimier.com\/en\/home\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#CodePen : Burger menus \u2026 ON INTERNET\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#website\",\"url\":\"https:\/\/www.benjaminsimier.com\/\",\"name\":\"Benjamin Simier\",\"description\":\"UI\/UX designer &amp; d\u00e9veloppeur front-end\",\"publisher\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.benjaminsimier.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\",\"name\":\"Benjamin Simier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg\",\"contentUrl\":\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg\",\"width\":872,\"height\":1200,\"caption\":\"Benjamin Simier\"},\"logo\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BSimierWeb\",\"https:\/\/www.instagram.com\/benjamin_simier\/\",\"https:\/\/www.linkedin.com\/in\/benjaminsimier\/\"],\"url\":\"https:\/\/www.benjaminsimier.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"#CodePen : Burger menus \u2026 ON INTERNET - Benjamin Simier","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.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/","og_locale":"en_US","og_type":"article","og_title":"#CodePen : Burger menus \u2026 ON INTERNET","og_description":"As you may have noticed, there are more and more burger menus on the websites. Previously use only for mobile versions, they are gradually appearing on the website desktop version (pc).Some say that this menu system for PC versions is not appropriate, others say that the system is very good \u2026 For my part, I [&hellip;]","og_url":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/","og_site_name":"Benjamin Simier","article_publisher":"https:\/\/www.facebook.com\/BSimierWeb","article_author":"https:\/\/www.facebook.com\/BSimierWeb","article_published_time":"2018-10-02T08:27:32+00:00","article_modified_time":"2019-11-07T10:47:53+00:00","og_image":[{"width":1200,"height":751,"url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/codepen_menu-burger_22e154bc4650fdb44a9a12f9c8bf13dd.jpg","type":"image\/jpeg"}],"author":"Benjamin Simier","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benjamin Simier","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#article","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/"},"author":{"name":"Benjamin Simier","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"headline":"#CodePen : Burger menus \u2026 ON INTERNET","datePublished":"2018-10-02T08:27:32+00:00","dateModified":"2019-11-07T10:47:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/"},"wordCount":291,"commentCount":0,"publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"keywords":["codepen","web"],"articleSection":["Webdesign"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/","url":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/","name":"#CodePen : Burger menus \u2026 ON INTERNET - Benjamin Simier","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/#website"},"datePublished":"2018-10-02T08:27:32+00:00","dateModified":"2019-11-07T10:47:53+00:00","breadcrumb":{"@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.benjaminsimier.com\/en\/codepen-burger-menus-on-internet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.benjaminsimier.com\/en\/home\/"},{"@type":"ListItem","position":2,"name":"#CodePen : Burger menus \u2026 ON INTERNET"}]},{"@type":"WebSite","@id":"https:\/\/www.benjaminsimier.com\/#website","url":"https:\/\/www.benjaminsimier.com\/","name":"Benjamin Simier","description":"UI\/UX designer &amp; d\u00e9veloppeur front-end","publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.benjaminsimier.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086","name":"Benjamin Simier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/","url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","contentUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","width":872,"height":1200,"caption":"Benjamin Simier"},"logo":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BSimierWeb","https:\/\/www.instagram.com\/benjamin_simier\/","https:\/\/www.linkedin.com\/in\/benjaminsimier\/"],"url":"https:\/\/www.benjaminsimier.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/833"}],"collection":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/comments?post=833"}],"version-history":[{"count":1,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/833\/revisions"}],"predecessor-version":[{"id":834,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/833\/revisions\/834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media\/649"}],"wp:attachment":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media?parent=833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/categories?post=833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/tags?post=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}