Close menu after clicking in the menu link

Design help Animations & Interactions
1

Hi, guys!

When i click on the menu, the link it’s going to the section but the menu is still open. I need - it should close after clicking the menu link.

The structure of menu is simple: ( 1- nav-menu / 2- menu-links / 3-link-section )

Structure_Nav_Menu
Structure_Nav_Menu240×661 15.4 KB

In the custom code area, I try to insert these 2 codes, but nothing works. It’s going to section, but don’t close after it.

1- First try
$(‘.nav-menu menu-links a’).on(‘click’, function(){
$(“.nav-menu”).hide();
});

2- Second try
$(‘.nav-menu menu-links a’).on(“click”, function (e) {
menuLink.click().removeClass(“active”);
});

Anyone can help me with this?

Here is my public share link: Webflow - Rodrigo Pellegrino Portfolio

2

Why do you need custom code for that? Just set up interactions on your menu items that will hide your navigation wrapper on click.

3

How could I do that? Sorry to ask, but I’m new to the platform.

4

Set up an interaction on all your navlinks, make it a “mouse click”. You may then just use your “hidedesktopmenu” interaction I guess. When clicked the page will scroll and nav overlay will disappear. Just check your interactions closely - they have missing components. Perhaps they were the menu cross at the top right which should also disappear in this sequence.

5

Thanks a lot Dram!

Now it’s works! But the close icon, don’t hide with it. :disappointed_relieved:-(

Any solution?

Thanks in advance!

6

Well, you need to include the close icon in the “hide” interaction like you did with the nav wrapper.

1 Like
7

Dram once again, thank you soo much!

I made the adjustment in the interaction to hide the close button, just like you said. But after the click, the menu hamburger does not appear, I can not understand the reason, because the hide event is related to the close button - not related with hamburger menu.

Any idea? Can you help me just one more time?

Here is the URL: https://rodrigo-pellegrino.webflow.io

Here is my public share link: https://preview.webflow.com/preview/rodrigo-pellegrino?utm_source=rodrigo-pellegrino&preview=a9379d2d5b33cf171543499ae5e61e73

8

Ah, it seems you need one more step in your interaction - to make burgerIcon appear. Just add it to this same hide desktop menu interaction.

9

Hi Dram,

I just add “burgerIcon” into the interaction hide desktop menu, but for any reason after the interaction the doesn’t appear.

Anyway, thanks for the help!

1 Like
10

I don’t think you did.

33%20AM

Also remove the nonexistent elements from the interaction, this may cause crashes in the designer.

1 Like
11

Dram, I had done it before but it did not work.

Now I made in these sequence, like you say:

1- closeIcon = hide
2-burgerIcon = show

print
print239×718 7.05 KB

I’m soo sorry, but I really do not understand why it does not work.

Can you check for me again please?

12

The close icon does not appear, it’s ok!

But the burger icon, even after inclusion in the interaction, still does not appear.

13

No worries, mate, we’ll get this fixed.

Here is how you do it:

  • do not add anything in regards to burger icon to the hide desktop interaction.
  • Instead add another on click interaction to the menu buttons, that is called BurgerIconAnimation-Out. This is the one that makes a burger appear.

We need to add another interaction because appearance of the burger icon is very complex, so integrating it would be tedious. So we are using already present interaction!

1 Like
14

Thanks a lot Bro! Many many Thanks!

It’s works like a charm!

1 Like