Close fullscreen menu when in-page link is clicked (corrected)

Design help Animations & Interactions
1

Hello,
From an unknown reason my last post didn’t show up so I’ll try again.

Problem:
I have four menu items in fullscreen menu. What am I trying to do is to animate menu closing when inpage link is clicked (menu-item “Proizvodi”). I am having trouble to close menu-overlay and animate burger menu.
Can someone help me please?

Here is my public share link: https://preview.webflow.com/preview/aleksa-76a58f?utm_medium=preview_link&utm_source=designer&utm_content=aleksa-76a58f&preview=ad83f7e1db0faea623dc275745ccc166&mode=preview

1 Like
2

Hi @leksapgd maybe you could try adding the “menu close” interaction to each of the links on click… that should take care of that…

3

Hey, @IVG thanks for reply,
I have tried to do that with no success. I added manu-click 1 to all the links and still have the same result

4

So you could try to trick it by adding some custom code that will add an additional on click interaction that will simulate clicking on the menu -
something like this -
$( “#nav-link” ).click(function() {
$( “#menu-parent” ).click();
});

5

So I need to add embed code to navigation and paste the code you wrote into script tag. Unfortunately I don’t have any coding experience in order to execute this properly (I suppose).

6

you only embed the code in the “Custom Code” section of the page settings in the “before body” tag

the code needs to be in the script tags jut like you said… and to test functionality you have to publish the page and go to the live page to see if it works…

Screen Shot 2020-07-14 at 12.59.20 PM
Screen Shot 2020-07-14 at 12.59.20 PM934×1304 98.6 KB

1 Like
7

I tried code that you gave me, still with no success, but you gave me an idea what I should do. I wrote some code (it turns out that I still posses some knowledge in JS) and consulted my friend and we made this solution that works (picture below).

I very much appreciate time that you had put in helping me. Thanks!

Screenshot 2020-07-14 at 20.07.56
Screenshot 2020-07-14 at 20.07.561254×952 50.1 KB

3 Likes
8

Many thanks! I was totally stuck until I found your solution. Works like a charm.

1 Like
9

First of all, thanks @leksapgd for the great solution! As my personal contribution, here’s the code snippet as text :upside_down_face: , also for me worked only by making it run after all the content was loaded, so I added the DOM event listener.

For the newbies: remember to replace the class .menu_item and the ID menu-toggle for your own :slight_smile:
Hope this helps!

document.addEventListener('DOMContentLoaded', () => {
  const navLinks = document.querySelectorAll('.menu_item');
  Array.from(navLinks).forEach(element => {
    element.addEventListener('click', () => {
      document.getElementById("menu-toggle").click();
    });
  });
});
1 Like