{"id":1489,"date":"2013-05-09T17:05:52","date_gmt":"2013-05-09T15:05:52","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1489"},"modified":"2023-08-04T11:13:24","modified_gmt":"2023-08-04T09:13:24","slug":"un-menu-responsive-et-retina-friendly-sur-codrops","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/","title":{"rendered":"Un menu Responsive et Retina-Friendly sur Codrops"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Pour mon dernier article sur <a href=_-1187.html>Codrops<\/a>, j&rsquo;ai voulu jouer avec les font-icons et les media-queries pour cr\u00e9er un menu responsive qui s&rsquo;adapte aux tailles d&rsquo;appareil et de navigateur. Les couleurs sont inspir\u00e9es des armes Maliwan de Borderlands et le menu propos\u00e9 a 3 diff\u00e9rentes mises en pages :<\/p>\n<ul>\n<li>une navigation en\u00a0 blocs en ligne avec une animation de box-shadow sur les diff\u00e9rentes ic\u00f4nes,<\/li>\n<li>une disposition en 2 colonnes pour la version \u00ab\u00a0tablette\u00a0\u00bb au sens tr\u00e8s large<\/li>\n<li>une mise en page sous forme d&rsquo;un menu de listes, ferm\u00e9 par d\u00e9faut, pour les tr\u00e8s petits \u00e9crans.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1490\" src=_-1188.html alt=\"Menu responsive retina ready sur Codrops\" width=\"1240\" height=\"524\" \/><\/p>\n<p>Vous trouverez le tutoriel en ligne sur l&rsquo;article de Codrops <strong><a lang=\"en\" href=_-333.html hreflang=\"en\">\u00ab\u00a0Responsive Retina-Ready Menu\u00a0\u00bb<\/a> <\/strong>et vous pouvez \u00e9galement<strong> <a href=_-1189.html>voir directement la page de d\u00e9mo. <\/a><\/strong><\/p>\n<p>Il s&rsquo;agit d&rsquo;une d\u00e9mo qui utilise des propri\u00e9t\u00e9s CSS3 pour les animations, les couleurs et d&rsquo;autres effets. La d\u00e9mo ne fonctionnera donc pas sur les navigateurs qui ne prennent pas en compte ces propri\u00e9t\u00e9s. Le tutoriel d\u00e9crit la cr\u00e9ation de la font-icon personnalis\u00e9e avec IcoMoon. Si vous voulez en savoir plus en fran\u00e7aise sur ce sujet je vous invite \u00e0 lire mon article \u00ab\u00a0<a href=_-350.html>Cr\u00e9er une police d\u2019ic\u00f4nes facilement \u00e0 partir d\u2019illustrations vectorielles<\/a>\u00a0\u00bb sur Alsacr\u00e9ations.<\/p>\n<p>Le menu d\u00e9roulant de la version \u00ab\u00a0mobile\u00a0\u00bb est cr\u00e9\u00e9 avec du JavaScript. Par d\u00e9faut si JavaScript est d\u00e9sactiv\u00e9, le menu est ouvert, ce qui \u00e9vite de ne pas avoir de menu sur mobile en cas de d\u00e9sactivation volontaire ou souci avec le JavaScript. Il serait possible de le faire en \u00ab\u00a0full CSS3\u00a0\u00bb avec du :target ou encore tricher avec du :checked sur une checkbox, mais on entre dans le domaine du \u00ab\u00a0hack\u00a0\u00bb du HTML. Pour ce tuto j&rsquo;ai pr\u00e9f\u00e9r\u00e9 ne pas faire de full CSS, et avoir un HTML propre avec quelques lignes de JavaScript suppl\u00e9mentaires. Toutes les animations se font en CSS3.<\/p>\n<p>Comme ajout\u00e9 dans les commenataires, pas de polyfill responsive pour les vieux IE qui ne supportent pas les media-queries, mais vous pouvez toujours utiliser un width au lieu d&rsquo;un max-width pour faire en sorte de \u00ab\u00a0fixer\u00a0\u00bb la largeur pour ces navigateurs, qui de toute fa\u00e7on n&rsquo;existent pas sur mobile.<\/p>\n<p>Comme\u00a0 toujours, vous pouvez t\u00e9l\u00e9charger le code pour l&rsquo;adapter \u00e0 vos besoins :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Pour mon dernier article sur Codrops, j&rsquo;ai voulu jouer avec les font-icons et les media-queries pour cr\u00e9er un menu responsive qui s&rsquo;adapte aux tailles d&rsquo;appareil et de navigateur. Les couleurs sont inspir\u00e9es des armes Maliwan de Borderlands et le menu propos\u00e9 a 3 diff\u00e9rentes mises en pages : une navigation en\u00a0 blocs en ligne avec une animation de box-shadow sur les diff\u00e9rentes &hellip;<\/p>\n","protected":false},"author":3,"featured_media":8170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224],"tags":[],"class_list":["post-1489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-dates-pas-mis-a-jours"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<meta name=\"description\" content=\"Un tutoriel de menu responsive qui s&#039;adapte aux tailles d&#039;appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-1190.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Un tutoriel de menu responsive qui s&#039;adapte aux tailles d&#039;appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-09T15:05:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-04T09:13:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/05\/codropsmenu-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1240\" \/>\n\t<meta property=\"og:image:height\" content=\"524\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/\",\"name\":\"Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg\",\"datePublished\":\"2013-05-09T15:05:52+00:00\",\"dateModified\":\"2023-08-04T09:13:24+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Un tutoriel de menu responsive qui s'adapte aux tailles d'appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg\",\"width\":1240,\"height\":524},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Un tutoriel de menu responsive qui s'adapte aux tailles d'appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.","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:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/","og_locale":"fr_FR","og_type":"article","og_title":"Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Un tutoriel de menu responsive qui s'adapte aux tailles d'appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-05-09T15:05:52+00:00","article_modified_time":"2023-08-04T09:13:24+00:00","og_image":[{"width":1240,"height":524,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/05\/codropsmenu-1.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/","name":"Un menu Responsive et Retina-Friendly sur Codrops - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg","datePublished":"2013-05-09T15:05:52+00:00","dateModified":"2023-08-04T09:13:24+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Un tutoriel de menu responsive qui s'adapte aux tailles d'appareil et de navigateur avec 3 diff\u00e9rentes mise en page : en ligne, en colonnes et en blocs.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/un-menu-responsive-et-retina-friendly-sur-codrops\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/05\/codropsmenu-1.jpg","width":1240,"height":524},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1489"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":3,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1489\/revisions"}],"predecessor-version":[{"id":8454,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1489\/revisions\/8454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/8170"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}