{"id":15035,"date":"2019-01-13T06:58:06","date_gmt":"2019-01-13T06:58:06","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=15035"},"modified":"2023-01-17T06:51:37","modified_gmt":"2023-01-17T06:51:37","slug":"css3-off-canvas-panel-with-menu-2","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/css3-off-canvas-panel-with-menu-2\/","title":{"rendered":"CSS3 OFF-CANVAS PANEL WITH MENU"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul>\n<li>Darren Huskie<\/li>\n\n\n\n<li>June 20, 2013<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>Made with:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul>\n<li>HTML \/ CSS \/ JavaScript<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>About the code:<\/em><\/u><\/strong><\/h4>\n\n\n\n<p>This is an amazing and awesome\u00a0<strong>CSS3 off-canvas panel with menu<\/strong>\u00a0and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/Huskie\/share\/zip\/wHKor\/\" 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\n\n<a href=\"https:\/\/codepen.io\/Huskie\/pen\/wHKor\/\" 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: Made with: About the code: This is an amazing and awesome\u00a0CSS3 off-canvas panel with menu\u00a0and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":15045,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4268],"tags":[20,4271,3606,4272],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15035"}],"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=15035"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15035\/revisions"}],"predecessor-version":[{"id":36024,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/15035\/revisions\/36024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/15045"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=15035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=15035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=15035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}