Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Can I link directly to a specific menu when using menu block with multiple menus?


ThisJustin

Question

Site URL: https://www.savourycity.com/events/plated

Hello,

I have a page that uses the built-in Menu block feature with multiple menus. I'm wondering if there is a way to navigate to this page but indicate which menu to display?

Is there anything that can be added to the URL to make this happen? Or perhaps adding a variable that some javascript could handle?

I'm just not really sure how the Menu block is implemented, but it's frustrating that Squarespace hasn't exposed some easy way to do this.

Thanks in advance!

Link to comment

1 answer to this question

Recommended Posts

  • 1

I forgot to say I am talking about the Menu blocks in 7.0 and am currently working on Brine.

Ok here's what I figured out using JavaScript and jQuery. This won't work if you have multiple Menu blocks on the same page.

I decided to use the anchor link URL syntax rather than variables for tidiness. This should take a URL in the format: https://example.com/menu-page#menu-name

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

<!-- SMART URLs FOR MENU BLOCK -->
<script>
$(document).ready(function(){
 var anchor = getUrlAnchor();
 if (anchor) {
   $(".menu-select-labels").each(function(){
      var name = $(this).text();
      var slug = slugify(name);
      if (anchor == slug){
      	$(this).attr("tabindex", "0");
        $(this).attr("aria-selected", "true");
        $(this).addClass("menu-select-labels--active");
      } else {
      	$(this).attr("tabindex", "-1");
        $(this).attr("aria-selected", "false");
        $(this).removeClass("menu-select-labels--active");
      }
   });
   $(".menus--has-multiple .menu").each(function(){
      var name = $(this).attr("aria-label");
      var slug = slugify(name);
      if (anchor == slug){
      	$(this).css("display", "block");
      } else {
      	$(this).css("display", "none");
      }
   });
 } else {
   var name = $(".menu-select-labels--active").text();
   var slug = slugify(name);
   updateUrl(slug);
 }
 $(".menu-select-labels").click(function(){
   var name = $(this).text();
   var slug = slugify(name);
   updateUrl(slug); 
 }); 
});
</script>

Here's a function to retrieve the anchor link from the URL (the part after the #):

<script>
var getUrlAnchor = function getUrlAnchor() {
    var url = window.location.href;
  	if (url.indexOf('#') > 0){
      return url.substring(url.indexOf('#') + 1);
    }
    return false;
};
</script>

And another one to update the URL with the current menu:

<script>
var updateUrl = function updateUrl(slug) {
  const state = { 'menu_id': slug };
  const title = document.title;
  const url = window.location.href;
  const baseUrl = url.substring(0, url.indexOf('&'));
  const newUrl = baseUrl + "#" + slug;
  history.pushState(state, title, newUrl);
  return newUrl;
}
</script>

And finally a helper function to slugify the menu names since Squarepsace doesn't do this anywhere (this one I borrowed from the internet):

<script>
// Slugify a string
var slugify = function slugify(str) {
    str = str.replace(/^\s+|\s+$/g, '');

    // Make the string lowercase
    str = str.toLowerCase();

    // Remove accents, swap ñ for n, etc
    var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
    var to   = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
    for (var i=0, l=from.length ; i<l ; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    // Remove invalid chars
    str = str.replace(/[^a-z0-9 -]/g, '') 
    // Collapse whitespace and replace by -
    .replace(/\s+/g, '-') 
    // Collapse dashes
    .replace(/-+/g, '-'); 

    return str;
}
</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...