jQuery subpage navigation hack

Hey all,

Just thought I'd share my little hack to create navigation on a group of subpages belonging to the same folder in the main navigation. 

Disclaimer: This was done in somewhat of a hurry, and I haven't used jQuery in a long time, so there's likely a more efficient way to code it. If you know or come up with a better way, please do share it!

The way to use this, is simply by creating a folder in the main navigation with pages in it. Then on each page, using the code block, insert a DIV with the ID "pageMenu".

Then add the code below using code injection to all pages (Settings > Advanced > Code Injection) in either the Header or Footer, making sure to replace "yourdomain" with – you guessed it, your domain 😉

The code first checks if a DIV with ID "pageMenu" exists on the page currently being viewed. If it doesn't, the code won't run.
If it does exist, the code then looks through all Main Navigation folders for a match between the current page url and links inside those folders. If one is found, that parent folder's code and all the links inside it (basically a UL list) will be appended to the DIV with ID "pageMenu".

All you need to do then is style it using some custom CSS.

Also, I wanted to make it possible for the guy responsible for the content on this site to hide any folders with subpage menus on its pages. So to do that, using this code, all he needs to do is name the folders "Foo" (feel free to change this). If you do this, chances are you might want to also hide the folder name from the new page menu, which the code below also does.

FYI 1: Of course no code is actually moved, as you can see by viewing source on the resulting page, the page only acts as if it was.

FYI 2: You may need to tweak the selectors a bit depending on which template you are using, since not all main navigation menus are constructed the same way.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  	//Move Main Nav folder where current page is a child to wherever an object with ID "pageMenu" is placed manually on page
  
    if ($("#pageMenu").length){
  			//Get current page url without domain
  			var canonical = $('link[rel="canonical"]').attr('href');
  			var pageurl = canonical.replace('https://www.yourdomain.com', '');
  
  			//Find menu in Main Nav that contains a link matching the url of current page and get its HTML content into a variable
  			var mainmenuFolder = $(".main-nav .folder-parent a").filter(
              function(index) { return $(this).attr("href") === pageurl; return false;}
            ).closest("div.folder-parent").get(0).outerHTML;
  
  			//Append the Main Nav folder found to the #pageMenu object
  			$("#pageMenu").append(mainmenuFolder);
  			//Hide the Parent Folder link in the newly created Page Menu
  			$("#pageMenu .folder-parent a:first").hide();
       }
  	
  	//Hide all Parent Folders in Main Nav if they're named "Foo"
  	$(".main-nav span").filter(function(index) { return $(this).text() === "Foo";}).parent().hide();
});
</script>