Menu button style change on open/close

[Thomas_Harries]

Hi All,

I’m trying to achieve this:

A change of wording from Menu to Close and an inversion of colour.

So far I can’t do it and I posted about it before (here: Menu button style when open - #3 by Thomas_Harries) but the trail ran cold. Can anyone help please? Links below

Many thanks,

Tom

---

https://vocalapp.webflow.io/

https://preview.webflow.com/preview/vocalapp?utm_medium=preview_link&utm_source=designer&utm_content=vocalapp&preview=4443df3a64927d738ac62481ce0ee351&pageId=5e57afeb3dfad17156398cce&itemId=5e7cc3b260e387bca8332576&mode=preview

[evekayser (Eve)]

Hi @Thomas_Harries! Great job! It’s a beautiful website!

You can create a click interaction to have this effect:

1. First click on menu button then go to mouse click interaction

2. Select action and start an animation:

3. Create a new one here:

4. Now first click on mobile menu closed and then click on “hide/show”

5. Set as display “none”.

6. Now, do the same with the mobile menu open:

7. But click on display: block.

8. Done, after this just create the reverse process on “2nd click” to close the menu button.

if you need more help, please tell me,

cheers,
Eve Kayser

[Thomas_Harries]

Thanks so much!!! This is awesome feedback, totally unexpected

I’m halfway there…

The first tap animation works great. The second tap however results in the ‘invisible’ close text appearing. Pretty sure I’ve followed exactly, but every chance I’ve ballsed it up…

[evekayser (Eve)]

Hi @Thomas_Harries!

Almost there:

You created 2 click interactions:

You should create just one because it will identify the first click and second click of the same interaction:

1. Delete second interaction:

2. Click on current interaction:

3. Scroll down, go to “2nd click” and click on “Select action”.

4. Start animation

5. Select “2nd tap” interaction you already created:

Cheers,
Eve Kayser

[Thomas_Harries]

Doh! Thank you so much - so helpful. The rest looks great