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

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>