{"id":12703,"date":"2018-12-27T05:06:37","date_gmt":"2018-12-27T05:06:37","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=12703"},"modified":"2021-06-22T07:09:03","modified_gmt":"2021-06-22T07:09:03","slug":"css-staggered-animation-dropdown-menu","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/css-staggered-animation-dropdown-menu\/","title":{"rendered":"CSS STAGGERED ANIMATION DROPDOWN MENU"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><u><em>Author:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>Boomer<\/li><li>August 2, 2016<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><u><em>Made with:<\/em><\/u><\/strong><\/h4>\n\n\n\n<ul><li>HTML<\/li><li>CSS\/Sass<\/li><li>JavaScript (jquery.js)<\/li><\/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 a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu. Rather than applying the delay in CSS\/SASS files based on&nbsp;<code>nth-child()<\/code>, the delay is injected via jQuery on document ready. This pattern can be used in a render function for Meteor or within Angular\/React. This could be done at&nbsp;<code>mouseenter()<\/code>, but there could be a JavaScript delay in relation to instant CSS hover. By having it in the page render, it ensures it up to date whenever the user hovers. The function simply counts the number of children in the dropdown menu and applies a delay based on it&#8217;s index value within the loop. If you have dropdown headers, dividers or links, you&#8217;ll need to update it to traverse the DOM. Easiest way is by&nbsp;<code>console.log(index)<\/code>&nbsp;within the each funciton to ensure it&#8217;s counting the children properly.<\/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\/CodeBoomer\/share\/zip\/pbONgz\" 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\/CodeBoomer\/pen\/pbONgz\" 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: Boomer August 2, 2016 Made with: HTML CSS\/Sass JavaScript (jquery.js) About the code: This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu. Rather than applying the delay in CSS\/SASS files based on&nbsp;nth-child(), the delay is injected via jQuery on document ready. This pattern can be used in a render function for Meteor or within Angular\/React. This could be done at&nbsp;mouseenter(), but there could be a JavaScript delay in relation to instant CSS hover. By having it in the page render, it ensures it up to date whenever the user hovers. The function simply counts the number of children in the dropdown menu and applies a delay based on <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":12708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3504,2420],"tags":[20,3503,3524,2421],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/12703"}],"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=12703"}],"version-history":[{"count":3,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/12703\/revisions"}],"predecessor-version":[{"id":27137,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/12703\/revisions\/27137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/12708"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=12703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=12703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=12703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}