Clickable Menu Folders

The SQSP Library of Code is a compilation of different bits of html, CSS and Javascript that I’ve used in my own web design. Rather than keeping the links from creators all over the internet stored locally I thought I’d share them instead! Keep these at hand by subscribing to the foubography rss feed or head to foubography’s instagram and save the posts.

This is probably one of the handiest bits of CSS code I put in every Squarespace website I design (that has folders). It’s a bit more complicated than usual, but worth it. Will Meyers explains it brilliantly in his YouTube video and you can copy the code from his website here.

Add the below code into your Settings » Advanced » Code Injection » Footer area.

<script>

(function () {

  let folders;

  function rebuildAnchor(folder) {

    let parent = folder.closest('.header-nav-item--folder'),

        href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""),

        anchorClone = folder.cloneNode(true);

    anchorClone.classList.add('clickable-folder');

    anchorClone.setAttribute('href', href);

    anchorClone.style.cssText = `

          opacity: 1;

          transform: unset;

    `;

    parent.insertAdjacentElement('afterbegin', anchorClone);

    if (href == window.location.pathname) {

      anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active')

    }

  }

  function addToMobile(folder) {

    let href = folder.getAttribute("href"),

        hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""),

        text = folder.innerText,

        newText = `All ${text}`,

        mobileFolder = document.querySelector(`[data-folder="${href}"]`),

        backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"),

        allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external">

  				<a href="${hrefAdjusted}">${newText}</a>

			<div>`;

    backButton.insertAdjacentHTML('afterend', allButton)

  }

  /* Select All Folder Links &  */

  function setFolderLinks() {

    folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');

    for (let folder of folders) {

      window.addEventListener('load', function() {

        addToMobile(folder);

        rebuildAnchor(folder);

        folder.remove();

      });

    }

  }

  setFolderLinks();

})();

</script>

Related posts