{"id":5778,"date":"2018-10-16T12:18:52","date_gmt":"2018-10-16T12:18:52","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=5778"},"modified":"2020-02-29T06:31:54","modified_gmt":"2020-02-29T06:31:54","slug":"accordion-menu-in-pure-css3","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/accordion-menu-in-pure-css3\/","title":{"rendered":"ACCORDION MENU IN PURE CSS3"},"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>Valeriu Timbuc<\/li>\n<li class=\".last-child\"><time>February 27, 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 class=\".last-child\">HTML \/ CSS<\/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 a nice and simple tutorial which will teach how to create an <strong>accordion menu<\/strong> in pure CSS3. As this menu is only created with CSS this will only work on browsers and devices that support the <code>:target<\/code>\u00a0pseudo-class selector.<\/p>\n<p><span class=\"accent\"><em><strong>Compatible browsers:<\/strong><\/em>\u00a0<\/span>Chrome, Edge, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\"><em><strong>Dependencies:<\/strong><\/em>\u00a0<\/span>&#8211;<\/p>\n<a href=\"https:\/\/www.dropbox.com\/s\/zf0dzr2vstznwve\/jqueryaccordionmenu.zip?dl=0\" 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:\/\/designmodo.com\/demo\/css3accordionmenu\" 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<\/span><\/a>\n<a href=\"https:\/\/designmodo.com\/css3-accordion-menu\/\" 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\"> Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Valeriu Timbuc February 27, 2016 Made with: HTML \/ CSS About the code: This is a nice and simple tutorial which will teach how to create an accordion menu in pure CSS3. As this menu is only created with CSS this will only work on browsers and devices that support the :target\u00a0pseudo-class selector. Compatible browsers:\u00a0Chrome, Edge, Firefox, Opera, Safari Dependencies:\u00a0&#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":5779,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1306],"tags":[1312,20,1308],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5778"}],"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=5778"}],"version-history":[{"count":3,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5778\/revisions"}],"predecessor-version":[{"id":19883,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5778\/revisions\/19883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/5779"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=5778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=5778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=5778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}