{"id":8741,"date":"2018-11-25T06:54:52","date_gmt":"2018-11-25T06:54:52","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=8741"},"modified":"2021-09-27T12:56:14","modified_gmt":"2021-09-27T12:56:14","slug":"hamburger-icon-animation-to-cross-underline-with-css","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/hamburger-icon-animation-to-cross-underline-with-css\/","title":{"rendered":"HAMBURGER ICON ANIMATION TO CROSS UNDERLINE WITH CSS"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Author:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>Ricardo Prieto<\/li>\n<li class=\".last-child\"><time>February 8, 2016<\/time><\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-link\"><\/div>\n<div class=\"info info-frontend\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Made with:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li class=\".last-child\">JavaScript (jquery.js)<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4 class=\"about-the-item\"><em><span style=\"text-decoration: underline;\"><strong>About the code:<\/strong><\/span><\/em><\/h4>\n<p>This is an amazing and awesome Menu in which you can animate the hamburger icon, which gives access to the responsive menu using transformations and CSS pseudo elements along with HTML, and turning the element into a new menu close icon that improves the UX in case the user wants to return to the previous view.<\/p>\n<a href=\"https:\/\/codepen.io\/cssparadise\/share\/zip\/VdwdOP\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"https:\/\/codepen.io\/cssparadise\/pen\/VdwdOP\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Ricardo Prieto February 8, 2016 Made with: HTML CSS JavaScript (jquery.js) About the code: This is an amazing and awesome Menu in which you can animate the hamburger icon, which gives access to the responsive menu using transformations and CSS pseudo elements along with HTML, and turning the element into a new menu close icon that improves the UX in case the user wants to return to the previous view.<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":8748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2349],"tags":[20,2351,2371],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8741"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=8741"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8741\/revisions"}],"predecessor-version":[{"id":29336,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/8741\/revisions\/29336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/8748"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=8741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=8741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=8741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}