anchor submenu

wordpress/wp-content/themes/makeitopen/acf-json/group_603c986dd28a4.json

@@ -568,6 +568,35 @@
                     ],
                     "min": "",
                     "max": ""
+                },
+                "layout_605df18e38976": {
+                    "key": "layout_605df18e38976",
+                    "name": "anchor",
+                    "label": "Anchor",
+                    "display": "block",
+                    "sub_fields": [
+                        {
+                            "key": "field_605df19338977",
+                            "label": "Anchor",
+                            "name": "anchor",
+                            "type": "text",
+                            "instructions": "",
+                            "required": 1,
+                            "conditional_logic": 0,
+                            "wrapper": {
+                                "width": "",
+                                "class": "",
+                                "id": ""
+                            },
+                            "default_value": "",
+                            "placeholder": "",
+                            "prepend": "",
+                            "append": "",
+                            "maxlength": ""
+                        }
+                    ],
+                    "min": "",
+                    "max": ""
                 }
             },
             "button_label": "+ Add Row",
@@ -592,5 +621,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1616153371
+    "modified": 1616769697
 }
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/acf-json/group_605df11a2198d.json

+{
+    "key": "group_605df11a2198d",
+    "title": "Submenu",
+    "fields": [
+        {
+            "key": "field_605df12f3fa42",
+            "label": "Submenu items",
+            "name": "submenu_items",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "collapsed": "",
+            "min": 0,
+            "max": 0,
+            "layout": "table",
+            "button_label": "Add submenu",
+            "sub_fields": [
+                {
+                    "key": "field_605df1383fa43",
+                    "label": "Label",
+                    "name": "label",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "maxlength": ""
+                },
+                {
+                    "key": "field_605df1590d65f",
+                    "label": "Anchor",
+                    "name": "anchor",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "maxlength": ""
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "post_type",
+                "operator": "==",
+                "value": "page"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "modified": 1616769374
+}
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/js/global.js

@@ -48,6 +48,13 @@
 		// 4. Add little arrow behind Open Schooling Navigator link
 		$('.menu-item.osn a').append('<span class="arrow">↗</span>');
 
+		// 5. Animate anchor links
+		$('.submenu a[href*="#"]').click(function(event) {
+			$('html, body').animate({
+				scrollTop: $(this.hash).offset().top
+			}, 200);
+		});
+
 
 		/* Archive functions
 		--------------------------------------------------------- */

wordpress/wp-content/themes/makeitopen/assets/js/main.min.js

-!function(e){e(document).ready(function(){function t(e){var t={g:!0,j:!0,p:!0,q:!0,y:!0},a=e.html().split("");for(i=0,i=0;i<a.length;i+=1)t[a[i]]&&(a[i]='<span class="descender descender--'+a[i]+'">'+a[i]+"</span>");e.html(a.join(""))}e(window).scroll(function(t){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){t(e(this))}),e(".page-header h1").each(function(){t(e(this))}),e("blockquote strong").each(function(){t(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>'),e(".archive__filters").on("click",".filter-button",function(){var t=e(this),i=t.attr("data-filter");t.parent().addClass("archive__filters--active"),e(".filter-button").removeClass("filter-button--active"),t.addClass("filter-button--active"),e(".archive__no-results").hide(),e(".grid").isotope({filter:i}),e(".grid").data("isotope").filteredItems.length||e(".archive__no-results").show()})})}(jQuery);
\ No newline at end of file
+!function(e){e(document).ready(function(){function t(e){var t={g:!0,j:!0,p:!0,q:!0,y:!0},a=e.html().split("");for(i=0,i=0;i<a.length;i+=1)t[a[i]]&&(a[i]='<span class="descender descender--'+a[i]+'">'+a[i]+"</span>");e.html(a.join(""))}e(window).scroll(function(t){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){t(e(this))}),e(".page-header h1").each(function(){t(e(this))}),e("blockquote strong").each(function(){t(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>'),e('.submenu a[href*="#"]').click(function(t){e("html, body").animate({scrollTop:e(this.hash).offset().top},200)}),e(".archive__filters").on("click",".filter-button",function(){var t=e(this),i=t.attr("data-filter");t.parent().addClass("archive__filters--active"),e(".filter-button").removeClass("filter-button--active"),t.addClass("filter-button--active"),e(".archive__no-results").hide(),e(".grid").isotope({filter:i}),e(".grid").data("isotope").filteredItems.length||e(".archive__no-results").show()})})}(jQuery);
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/elements/_submenu.scss

+.submenu {
+	margin: 30px 0 0;
+
+	&__wrapper {
+		display: inline-block;
+		margin: auto;
+		text-align: left;
+	}
+
+	a {
+		text-decoration: none;
+		font-weight: bold;
+		font-family: $font-header;
+		display: block;
+		position: relative;
+		padding: 0 0 0 20px;
+
+		&:after {
+			position: absolute;
+			left: 0;
+			margin: 0;
+		}
+	}
+}
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/elements/all.scss

@@ -2,3 +2,4 @@
 @import "events-teaser";
 @import "news-teaser";
 @import "label";
+@import "submenu";
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/global/_base.scss

@@ -44,6 +44,12 @@ body {
 			bottom: -5px;
 		}
 	}
+
+	&--submenu {
+		max-width: 270px;
+		margin: auto;
+		text-align: left;
+	}
 }
 
 .flex-wrapper {

wordpress/wp-content/themes/makeitopen/index.php

@@ -6,8 +6,9 @@
 			if ( have_posts() ) :
 
 				if (!is_front_page()) { ?>
-					<div class="page-header">
+					<div class="page-header <?php if (have_rows('submenu_items')) { echo 'page-header--submenu'; } ?>">
 						<h1><?php echo get_the_title(); ?></h1>
+						<?php get_template_part('template-parts/submenu'); ?>
 					</div>
 				<?php }
 

wordpress/wp-content/themes/makeitopen/template-parts/page-builder-rows/anchor.php

+<div id="<?php the_sub_field('anchor'); ?>"></div>
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/template-parts/submenu.php

+<?php
+if (have_rows('submenu_items')) :
+	echo '<div class="submenu">';
+		echo '<div class="submenu__wrapper">';
+			while (have_rows('submenu_items')) : the_row();
+				echo '<a href="#' . get_sub_field('anchor') . '" class="text-link text-link--down">' . get_sub_field('label') . '</a>';
+			endwhile;
+		echo '</div>';
+	echo '</div>';
+endif;
+?>
\ No newline at end of file