Load Pages Async

Hi guys,

Just customized the menu so it opens like this one: https://www.andrewhancock.com The one thing, which is not achievable is having the sub-menu stay open when you click on a sub-menu element itself and that page loads. For instance, if I go click on Stills, then click on “Chasing Wildflowers”, the page loads with “Stills” closed - have to click again to see the sub menu under Still.

Is the reason because the example website loads the pages async and Theme X doesn’t? Is there a way around it?

Custom code:

//==============================================================================
// Expanding Sub Menu
//==============================================================================
function add_js_script_for_expanding_submenu() {
	?>
     <script async defer>
          jQuery(document).ready(function(){
			   let checkElementInterval;
			    function checkElement() {
					if (jQuery('.sfm-has-child-menu').length == 0) {
						console.log('N');
					  checkElementInterval = setInterval(checkElement,1000);
				    } else {
						clearInterval(checkElementInterval);
						jQuery('.sfm-has-child-menu > a').hover(function(){
				           event.preventDefault();
				           event.stopPropagation();
			            });
			            jQuery('.sfm-has-child-menu > a').click(function(){
				           event.preventDefault();
				           event.stopPropagation();
				          jQuery(this).parent().children('.sfm-child-menu').slideToggle( "slow" );
			            });
						jQuery('.sfm-has-child-menu > a').on('touchend',function(){
				           event.preventDefault();
				           event.stopPropagation();
				          jQuery(this).parent().children('.sfm-child-menu').slideToggle( "slow" );
			            });adminpage
					}
				}
			    checkElement();
		  });
     </script>
    <?php
}

add_action( 'wp_head', 'my_custom_head_output', 99999 );
add_action( 'wp_footer', 'add_js_script_for_expanding_submenu' , 99900000);

Thank you,
Petar

p.s. original post: https://theme.co/apex/forum/t/menu-layout/58639

Hi @kcreative,

Thanks for reaching out.

Are you referring to this ?

That’s a custom made which probably store the menu state so when it’s load, it still loads the previous state. Then it also loads the content as Ajax content with pushState() feature (https://css-tricks.com/using-the-html5-history-api/). It’s not just the menu, but the content are custom made as well to properly integrate the two (menu and content). That would require more codes than just a javascript.

The one in your site is also a SuperFly menu which has it’s own standard and features separate to the Theme’s existing menu. I recommend contacting a developer to implement a saving-state feature for the menu.

Thanks!

Yes, that is what I was referring to. Thank you for the info!

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.