{"id":4201,"date":"2022-04-06T15:21:38","date_gmt":"2022-04-06T13:21:38","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=4201"},"modified":"2022-04-06T16:10:17","modified_gmt":"2022-04-06T14:10:17","slug":"menu-burger","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=4201","title":{"rendered":"Menu Burger"},"content":{"rendered":"\n

Le menu \u00ab\u00a0burger\u00a0\u00bb, ainsi nomm\u00e9 en raison de sa forme, est souvent utilis\u00e9 pour l’affichage sur \u00e9cran r\u00e9duit, sur smartphone par exemple. Il s’utilise donc la plupart du temps dans le cadre de la mise en place du responsive.<\/p>\n\n\n\n

Voici un exemple de menu burger en pur css, sans utilisation de javascript.<\/p>\n\n\n\n

Tout d’abord le code html. Lorsqu’il esxiste un menu standard qui laissera la place \u00e0 un menu burger en dessous d’une certaine largeur d’\u00e9cran, le plus simple est de placer deux menus dans le html.<\/p>\n\n\n\n

<!-- le menu standard -->\n<nav id=\"menu\">\n  <ul>\n    <li><a href=\"city.html\">City<\/a><\/li>\n    <li><a href=\"technic.html\">Technic<\/a><\/li>\n    <li><a href=\"about.html\">About<\/a><\/li>\n    <li><a href=\"contact.html\">Contact<\/a><\/li>\n   <\/ul>\n<\/nav>\n\n<!-- le menu burger -->\n<nav id=\"menu_burger\">\n  <input type=\"checkbox\" \/>\n\n  <span><\/span>\n  <span><\/span>\n  <span><\/span>\n\n  <ul id=menu_panel>\n    <li><a href=\"city.html\">City<\/a><\/li>\n    <li><a href=\"technic.html\">Technic<\/a><\/li>\n    <li><a href=\"about.html\">About<\/a><\/li>\n    <li><a href=\"contact.html\">Contact<\/a><\/li>\n  <\/ul>\n<\/nav><\/code><\/pre>\n\n\n\n
En situation \u00ab\u00a0normale\u00a0\u00bb, la premi\u00e8re nav#menu sera affich\u00e9e et la seconde nav#menu_burger sera cach\u00e9e par un display: none; Sur smartphone, ce sera l’inverse.<\/p>\n\n\n\n
Passons sur les css du menu standard, mis \u00e0 l’horizontale gr\u00e2ce \u00e0 flexbox.
Sur une r\u00e8gle responsive de petit \u00e9cran, voici le css du burger :<\/p>\n\n\n\n
@media screen and (max-width: 640px) {\n  \/* masquer le menu principal *\/\n  #menu {\n    display: none;\n  }\n\n  \/* afficher le menu burger *\/\n  #menu_burger {\n    display: block;\n    margin: 10px 0;\n    z-index: 1;\n    -webkit-user-select: none;\n  }\n\n  \/* dessiner le burger*\/\n  #menu_burger span {\n    display: block;\n    width: 32px;\n    height: 4px;\n    margin-bottom: 5px;\n    position: relative;\n    background: #000;\n    border-radius: 2px;\n    z-index: 1;\n    transform-origin: 4px 0px;\n    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),\n    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),\n\t              opacity 0.55s ease;\n  }\n\n  #menu_burger span:first-child {\n    transform-origin: 0% 0%;\n  }\n\n  #menu_burger span:nth-last-child(2) {\n    transform-origin: 0% 100%;\n  }\n\n  \/* placer la checkbox pour d\u00e9tecter le clic *\/\n  #menu_burger input {\n    display: block;\n    width: 34px;\n    height: 32px;\n    position: relative;\n    top: 28px;\n    cursor: pointer;\n    opacity: 0; \/* cacher le bouton *\/\n    z-index: 2; \/* et le placer par dessus le burger *\/\n    -webkit-touch-callout: none;\n  }\n\n  \/* transformer le burger en croix, au clic *\/\n  #menu_burger input:checked ~ span {\n    opacity: 1;\n    transform: rotate(45deg) translate(-2px, -1px);\n    background: #232323;\n  }\n\n  #menu_burger input:checked ~ span:nth-last-child(3) {\n    opacity: 0; \/* cacher barre du milieu *\/\n    transform: rotate(0deg) scale(0.2, 0.2);\n  }\n\n  #menu_burger input:checked ~ span:nth-last-child(2) {\n    transform: rotate(-45deg) translate(0, -1px);\n  }\n\n  \/* cacher initialement le panneau du menu *\/\n  #menu_panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100vw; \/* largeur de l'\u00e9cran *\/\n    height: 100vh; \/* hauteur de l'\u00e9cran *\/\n    \/* d\u00e9caler menu sous la croix *\/\n    padding-top: 300px;\n    background-color: rgba(164, 24, 10, 1);\n\n    list-style-type: none;\n    text-align: center;\n\n    \/* to stop flickering of text in safari *\/\n    -webkit-font-smoothing: antialiased; \n    \n    transform-origin: 0% 0%;\n    transform: translate(-100%, 0%);*\/\n    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);\n  }\n\n  \/* aspect du menu *\/\n  #menu_panel li{\n    padding: 10px 0;\n    font-size: 22px;\n  }\n\n  #menu_burger a{\n    text-decoration: none;\n    color: #fff;\n    transition: color 0.3s ease;\n  }\n\n  #menu_burger a:hover{\n    color: #000;\n  }\n\n  \/* animer le menu au clic *\/\n  #menu_burger input:checked ~ ul{\n    transform: none;\n  }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Le menu \u00ab\u00a0burger\u00a0\u00bb, ainsi nomm\u00e9 en raison de sa forme, est souvent utilis\u00e9 pour l’affichage sur \u00e9cran r\u00e9duit, sur smartphone par exemple. Il s’utilise donc la plupart du temps dans le cadre de la mise en place du responsive. Voici un exemple de menu burger en pur css, sans utilisation de javascript. Tout d’abord le … Continuer la lecture de Menu Burger<\/span>  →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":931,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/4201"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4201"}],"version-history":[{"count":10,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/4201\/revisions"}],"predecessor-version":[{"id":4212,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/4201\/revisions\/4212"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/931"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}