How to close full-screen menu after clicking anchor links?

[Simone_Williams]

Hi everyone,

I’m trying to make my website mobile responsive, and in doing that, I’m making a hamburger/full-screen menu for smaller screens.

My issue is that since my website is only one page, all of my menu links are anchor links linking to another section on my website. When I click on one of the links, it doesn’t exit out of the full-screen menu. The user would have to manually click on the ‘x’ button to close out.

I’ve been different types of code to link my trigger to the hamburger menu but nothing seems to work. Help?

---

Here is my site Read-Only: 1

[RDaneelOliwav]

Hey there!

Nice site you got there

You could add some js to click on the menu toggle when the user clicks on one of the anchor links.

Give each link on the fullscreen menu a custom attribute in order to attach an eventHandler (The value is unimportant):

Paste this code at the end of the body tag, like above or below your jquery code:

let fullscreenLinks = document.querySelectorAll('a[toggle-menu]')

fullscreenLinks.forEach((fullscreenLink) => {
  fullscreenLink.addEventListener('click', () => {
    document.getElementById('menu-toggle').click()
  })
})

Hope this works, only tested it in my devtools console!

IE doesn’t support forEach on nodeList, if you need IE support, maybe use a classic loop instead

[Simone_Williams]

You’re amazing!!! It worked, thank you so much.

For the IE support, what do you mean by classic loop?

[RDaneelOliwav]

IE market share is so low, plus so many big sites stopped support - one must go out of one’s way to be still using it…
I see no reason why I should bother ;D

WF has already so many issues on IE, it will not run well anyway

But here you go (not tested)

let fullscreenLinks = document.querySelectorAll('a[toggle-menu]'), i

for (i = 0; i < fullscreenLinks.length; ++i) {
  fullscreenLinks[i].addEventListener('click', () => {
    document.getElementById('menu-toggle').click()
  })
}