issue with css menu on mobile

[thob]

my problem is that the menu should close after clicking an anchor link in the mobile menu. It works without smooth-scroll (see here). When smooth-scroll is running however I have to close the menu manually. See it here
Any idea how to get back the desired behavior (automatic close of the mobile menu after click/tap)?

[cferdinandi]

You can use a callback after SmoothScroll runs to close the menu.

smoothScroll.callback(function () {
    // Some JS to close the menu
})

[thob]

Thanks, any idea what this could be. I'm not fit enough for coming up with something useful.

[cferdinandi]

@thob I actually think I figured out what this is! If any of this doesn't make sense, please ask me to clarify...

When Smooth Scroll animates a link, it uses event.preventDefault() to stop the page from just jumping to the link. Then, it calculates the distance and the easing pattern, and does a bunch of tiny jumps in rapid succession until it reaches the anchored element.

Once that's done, it uses the pushState JavaScript method to update the URL without causing another jump (if you used location.hash or location.href the page would jump again).

The problem with this last part (the pushState bit) is that it doesn't trigger a state change for:target.

As a result---this is the unfortunate part---there's no way to fix it as the code is written today. I thought you were using a JS approach to expand and collapse the menu. Your CSS approach is awesome, but fails with the way Smooth Scroll is currently written.

The good news: I plan on refactoring Smooth Scroll with a different approach. When you click a link:

1. Smooth Scroll will find the anchored element.
2. It will remove the id from that element and store it as a data attribute (data-id) on that element.
3. The link will do it's normal behavior, triggering an hash change in the URL. This will change the :target, which means your CSS approach will work.
4. Because there target element no longer has an id, no jump will happen.
5. After the hash changes, Smooth Scroll will locate the element whose data-id matches the hash, and run the old animation method I'm using today.

This approach has fewer CSS quirks or browser compatibility issues associated with it because it's letting the browser do more of the heavy lifting (versus trying to recreate URL history in JavaScript).

I'm hoping to get this done this week, but I can't commit to a hard launch date. But that's why this isn't working currently. Sorry about that!

[cferdinandi]

Also, reopening this and marking it as a bug.

[thob]

FYI: if using the CSS menu with a jquery based smooth scroll it works

[cferdinandi]

Fixed with v10.0.0 #283

Will be merging as soon as the build tests pass

[thob]

thanks for this super fast reaction!

[cferdinandi]

My pleasure! And thanks for letting me know about a weird edge-case bug I probably wouldn't have caught otherwise. This is one of my favorite things about open source projects!