{"id":35974,"date":"2023-01-16T06:20:19","date_gmt":"2023-01-16T06:20:19","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=35974"},"modified":"2023-01-16T07:25:29","modified_gmt":"2023-01-16T07:25:29","slug":"css-toggle-menu-2","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/css-toggle-menu-2\/","title":{"rendered":"CSS TOGGLE MENU"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul>\n<li>Alex Berkowitz<\/li>\n\n\n\n<li>August 7, 2015<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul>\n<li>HTML \/ CSS (SCSS)<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is a nice and simple expanding menu created using only CSS. The idea could be further refined with a tiny bit of JavaScript to automatically set the width to adjust based on the contents, allowing for buttons of varying width or expansion of the menu without changing the CSS.<\/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>Responsive:<\/em><\/strong> No<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211; <\/p>\n\n\n<a href=\"https:\/\/codepen.io\/berky93\/share\/zip\/XbGWKZ\" 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\/berky93\/pen\/XbGWKZ\" 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 a nice and simple expanding menu created using only CSS. The idea could be further refined with a tiny bit of JavaScript to automatically set the width to adjust based on the contents, allowing for buttons of varying width or expansion of the menu without changing the CSS. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: No Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":35975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4237],"tags":[20,9813,4248,3929,1899],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/35974"}],"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=35974"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/35974\/revisions"}],"predecessor-version":[{"id":35976,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/35974\/revisions\/35976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/35975"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=35974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=35974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=35974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}