Jump to content

Hide mobile nav/hamburger menu with JavaScript in 7.1

Recommended Posts

I am code-injecting JavaScript/jQuery to build a smooth-scrolling, hash navigation for a fixed-top menu bar in Squarespace 7.1 (so no template). The scrolling works great on desktop; on mobile it works too, with one exception. The navigation tray stays visible on the screen after clicking a link. So the page scrolls behind the open menu and it must be closed to return to the site. This is confusing.

The plan: close the nave menu with the smooth-scrolling script. Here are the steps used to make it disappear (including code for specificity). 

  1. Remove the "header menu open" class from the page body. This re-hides the menu.
    $('body').removeClass("header--menu-open");
  2. Remove the "x"-shaped styling from the hamburger menu, returning it to a "=" shape. 
    $('.burger').removeClass("burger--active");
  3. Remove the "hidden" HTML5 attribute on the <span> inside of the hamburger button's "open me" state (the "="). 
    $('.js-header-burger-open-title.visually-hidden').removeAttr('hidden');
  4. Add the "hidden" attribute to the hamburger button's "close me" state (the "x"). 
    $('.js-header-burger-close-title.visually-hidden').prop('hidden', true); 

The problem: Everything appears as it should visually on the page, as well as the changes in the web-inspector when opening/closing the nav tray normally. But at this point the hamburger menu (in "=" state) requires an extra click to open the menu as it normally would. One click to trigger something(?) and a second to open the menu. It seems Squarespace does not recognize the added "hidden" attribute from step 4.

Does anyone know why that is, or where to start looking? I have had trouble with odd AJAX calls during page reloads, perhaps that is a hint. As this is beyond my knowledge – especially of 7.1 – any advice, direction, or thoughts are appreciated. 

Link to comment
  • Replies 3
  • Views 2.2k
  • Created
  • Last Reply
  • 4 weeks later...
  • 3 months later...

I like the idea, but it seems easier to help the user click the close button. That way the logical abstraction of the burger menu isn't broken.

This is my code:


function closeMenu() {
	var off = $('.burger-inner');
	if (off != null && off.length > 0) {
		eventFire(off[0], 'click');
	}
}

 function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
  }

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.