Menu button - closing interaction

Design help Animations & Interactions
1

Hi

I have created a menu button and when it opens it is fine. But I would like to set it up so that when you click on the menu button it closes as well. How would I do this?

I made the initial interaction using legacy interactions and made it based on this: https://webflow.com/website/Custom-Hamburger-Menus

Thanks for your help :slight_smile:

Here is my public share link: https://preview.webflow.com/preview/musifest?utm_source=musifest&preview=0dfbf51b56d112e2e2bee788ff009d9e
(how to access public share link)

2

In IX2 you can choose on mouse click and you will have on first click and on second click for adding your interactions. Use on second click to close the menu.

1 Like
3

Thanks Dram. I’ve figured out how to close it :slight_smile:

The problem I’m having is I have the Open Menu cover the whole screen, which is the look I’m going for. This also covers the menu button, so it is not clickable. Is there a way of making it clickable but still have the Open menu cover the whole screen. Thanks!

4

Give this class Bubbly nav menu a z-index of -1

5

Did just try that but it didn’t work

6

Weird. OK, then give your meltingpot class z-index: 2. Worked for me.

7

Thanks Dram - that worked! You’re the best :slight_smile:

8

Good to hear it did the trick!

1 Like
9

Hi,

i am working also on this. My problem is that the menu is opening in first click perfect. closing perfect with the second click, but than, with the third click (open again) it doesn’t workng smoothly anymore.

https://preview.webflow.com/preview/oktober-2019?utm_medium=preview_link&utm_source=designer&utm_content=oktober-2019&preview=5f695cefd23884878a54fc6482b90d03&mode=preview

@dram any idea why?

1 Like
10

Most likely because your show/hide intractions are inside the main sequence of action. They should stand by themselves. As in if you want to show your nav smoothly you do it as follows:

  • initial state of menu is hidden, opacity is 0
  • interaction plays first with making menu shown
  • then as a next action you make your menu gain opacity 100

To hide you do it in reverse:

  • first you make your nav to dissappear with opacity 0 and duration
  • then you hide it with show/hide option

These actions should be separate from each other not happen simultaneously (even if there is a delay)