{"id":26663,"date":"2016-06-20T23:01:31","date_gmt":"2016-06-20T15:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26663"},"modified":"2018-04-09T16:59:26","modified_gmt":"2018-04-09T08:59:26","slug":"hamburger-menu-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/","title":{"rendered":"20 Yummy Hamburger Menu Animations"},"content":{"rendered":"<p>A hamburger menu primarily <strong>triggers a sliding drawer navigation which contains links to pages all over the website<\/strong>.  Sliding drawer navigation menus are great for responsive design but they can also be tricky to implement. If you\u2019re looking for new ways to animate those three lines into a neat X (which indicate close), check out this showcase of <strong>fantastic CSS hamburger menu animations<\/strong>.<\/p>\n<p class=\"note\"><strong>Read more: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">More creative CSS animations you need to see<\/a><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/mikedevelops\/pen\/oXPGoN\/\">Hamburger Menu (with Cheese)<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/mikedevelops\">Michael Smart<\/a><\/p>\n<p><iframe height=\"620\" scrolling=\"no\" src=\"https:\/\/codepen.io\/mikedevelops\/embed\/oXPGoN\/?height=620&theme-id=0&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/Brydave\/pen\/EGIju\/\">CSS Animated Hamburger Icon<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Brydave\">Brydave<\/a><\/p>\n<p><iframe height=\"300\" scrolling=\"no\" src=\"https:\/\/codepen.io\/Brydave\/embed\/EGIju\/?height=300&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/CharlesSmart\/pen\/gbdaOa\/\">Ultimate Hamburger Menu<\/a> by<a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/CharlesSmart\"> CharlesSmart<\/a><\/p>\n<p><iframe height=\"300\" scrolling=\"no\" src=\"https:\/\/codepen.io\/CharlesSmart\/embed\/gbdaOa\/?height=300&theme-id=0&default-tab=html,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/alcoven\/pen\/JdoWdx\/\">Atomic Menu<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/alcoven\">Alex Coven<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/alcoven\/embed\/JdoWdx\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"> <\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rss\/pen\/vIDKH\/\">Star Wars Icon<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/rss\">Raza Selauk Saydam<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/rss\/embed\/vIDKH\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"> <\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Zaku\/pen\/vcaFr\/\">Menu Toggle<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Zaku\">Tamino Martinius<\/a><\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/Zaku\/embed\/vcaFr\/?height=350&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/icutpeople\/pen\/Kcxdp\/\">Animated Burger\/Menu Icon<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/icutpeople\">Nicholas M. Smith<\/a><\/p>\n<p><iframe height=\"350\" scrolling=\"no\" src=\"https:\/\/codepen.io\/icutpeople\/embed\/Kcxdp\/?height=350&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/designcouch\/pen\/hyFAD\/\">Drawn Hamburger Transition<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/designcouch\">Jesse Couch<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/designcouch\/embed\/hyFAD\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/arjancodes\/pen\/jErbyM\/\">Material Design<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/arjancodes\">Arjan Jassal<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/arjancodes\/embed\/jErbyM\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/GrahamWilsdon\/pen\/OVoaNQ\/\">Frosty<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/GrahamWilsdon\">Graham Wilsdon<\/a><\/p>\n<p><iframe height=\"700\" scrolling=\"no\" src=\"https:\/\/codepen.io\/GrahamWilsdon\/embed\/OVoaNQ\/?height=700&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/lbebber\/pen\/rawQKR\/\">CSS Gooey Menu (v4)<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/lbebber\">Lucas Bebber<\/a><\/p>\n<p><iframe height=\"400\" scrolling=\"no\" src=\"https:\/\/codepen.io\/lbebber\/embed\/rawQKR\/?height=400&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/brenden\/pen\/VLjKMQ\/\">PFullscreen Navigation Menu<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/brenden\">Brenden Palmer<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/brenden\/embed\/VLjKMQ\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Sergioandrade\/pen\/onkub\/\">Morphing Hamburger<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Sergioandrade\">Sergio<\/a><\/p>\n<p><iframe height=\"450\" scrolling=\"no\" src=\"https:\/\/codepen.io\/Sergioandrade\/embed\/onkub\/?height=450&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/stevenfabre\/pen\/LGvzk\/\">Animated Hamburger<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/stevenfabre\">Steven Fabre<\/a><\/p>\n<p><iframe height=\"450\" scrolling=\"no\" src=\"https:\/\/codepen.io\/stevenfabre\/embed\/LGvzk\/?height=450&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/BJack\/pen\/alGCs\/\">Another Top Menu<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/BJack\">BJack<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/BJack\/embed\/alGCs\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/netfuel\/pen\/rIlnB\/\">Animated Hamburger Menu<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/netfuel\">Matthew Ladner<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/netfuel\/embed\/rIlnB\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/vineethtr\/pen\/VYRzaV\/\">Open \u2013 Close <\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/vineethtr\">Vineeth.TR<\/a><\/p>\n<p><iframe height=\"500\" scrolling=\"no\" src=\"https:\/\/codepen.io\/vineethtr\/embed\/VYRzaV\/?height=500&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/DawidKrajewski\/pen\/GgErVO\/\">CSS3 Only Hamburger<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/DawidKrajewski\">Dawid Krajewski<\/a><\/p>\n<p><iframe height=\"320\" scrolling=\"no\" src=\"https:\/\/codepen.io\/DawidKrajewski\/embed\/GgErVO\/?height=320&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Jackthomsonn\/pen\/rVaodQ\/\">Jumping Hamburger<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Jackthomsonn\">Jack Thomson <\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/Jackthomsonn\/embed\/rVaodQ\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>\n<p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/j0be\/pen\/jWLNoa\/\">Hamburger Menu<\/a> by <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/j0be\">j0be<\/a><\/p>\n<p><iframe height=\"265\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/j0be\/embed\/jWLNoa\/?height=265&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\"><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are great for responsive design but they can also be tricky to implement. If you\u2019re looking for new ways to animate those three lines into a neat X (which indicate close), check out&hellip;<\/p>\n","protected":false},"author":124,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[507,3498],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Yummy Hamburger Menu Animations - Hongkiat<\/title>\n<meta name=\"description\" content=\"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are\" \/>\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.hongkiat.com\/blog\/hamburger-menu-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Yummy Hamburger Menu Animations\" \/>\n<meta property=\"og:description\" content=\"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-20T15:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:59:26+00:00\" \/>\n<meta name=\"author\" content=\"Nancy Young\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nancy Young\" \/>\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.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/\"},\"author\":{\"name\":\"Nancy Young\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\"},\"headline\":\"20 Yummy Hamburger Menu Animations\",\"datePublished\":\"2016-06-20T15:01:31+00:00\",\"dateModified\":\"2018-04-09T08:59:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/\"},\"wordCount\":191,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Animation\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/\",\"name\":\"20 Yummy Hamburger Menu Animations - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2016-06-20T15:01:31+00:00\",\"dateModified\":\"2018-04-09T08:59:26+00:00\",\"description\":\"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/hamburger-menu-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Yummy Hamburger Menu Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\",\"name\":\"Nancy Young\",\"description\":\"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/nancy_young\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Yummy Hamburger Menu Animations - Hongkiat","description":"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are","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.hongkiat.com\/blog\/hamburger-menu-animations\/","og_locale":"en_US","og_type":"article","og_title":"20 Yummy Hamburger Menu Animations","og_description":"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are","og_url":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-06-20T15:01:31+00:00","article_modified_time":"2018-04-09T08:59:26+00:00","author":"Nancy Young","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Nancy Young","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/"},"author":{"name":"Nancy Young","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32"},"headline":"20 Yummy Hamburger Menu Animations","datePublished":"2016-06-20T15:01:31+00:00","dateModified":"2018-04-09T08:59:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/"},"wordCount":191,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Animation"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/","url":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/","name":"20 Yummy Hamburger Menu Animations - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2016-06-20T15:01:31+00:00","dateModified":"2018-04-09T08:59:26+00:00","description":"A hamburger menu primarily triggers a sliding drawer navigation which contains links to pages all over the website. Sliding drawer navigation menus are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/hamburger-menu-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Yummy Hamburger Menu Animations"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32","name":"Nancy Young","description":"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.","url":"https:\/\/www.hongkiat.com\/blog\/author\/nancy_young\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6W3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26663"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26663\/revisions"}],"predecessor-version":[{"id":43577,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26663\/revisions\/43577"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26663"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}