Streaming live at 10am (PST)

Hamburger interaction (part) working, but it takes 2 clicks instead of 1 to properly interact?


#1

Hi Webflowers,

I have a simple hamburger animation that is part working… I have the standard 3 horizontal divs. When I 1st click, the middle div animates and reduces in size to make the hamburger look like a letter E (using IX2).

the second click then animates the middle div to its original size of 40 px width. It should work, however it takes 2 clicks for the 2nd click work. Would really appreciate help on this.
Cheers in advance,
Ru


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

The problem with your idea - the user also close the menu by click outside (overlay) - so anyway your idea not completed.

I think in this case it’s better to work with custom CSS (like this you solve the overlay “problem”). The .w--open toggle by webflow(Javascript) - so take advantage of
this.

Try this custom code (Backup - than remove your interaction):

<style>    
   .ham-div-mid{
          width: 40px;
          -webkit-transition: width 0.8s ease;
          -moz-transition: width 0.8s ease;
           transition: width 0.8s ease;
    }
    .w--open .ham-div-mid{
          width: 20px;
          -webkit-transition: width 0.8s ease;
          -moz-transition: width 0.8s ease;
           transition: width 0.8s ease;
    }
</style> 

Example:


#3

Brilliant work @Siton_Systems ! Thanks for that neat code solution ! I really love the codepen example you sent also! It’s totally motivating me to learn code much better right now…

It would be great to know a non-code workaround the ‘click outside (overlay)’ issue I created?
How can I deconstruct this issue within webflow natively?
I produced another site recently which did not create this issue.
live https://www.ninamurphyassociates.co.uk/
non edit link https://preview.webflow.com/preview/ninamurphyassociates?preview=8266b5af08a059a85ae50693c518ad8e


#4

Thanks.

Add separate Q about this. Only the staff could answer this. I don’t know if there is a wishlist about this idea beacuse is very very niche.

Also:
Other site ===> Close by overlay --> Animation won’t work

This is not a bug. The interaction only assign to the Hambureger button

One “not code” option to solve this is to create extra overlay - assing interaction for this overlay - and affect the button. The overlay must be with bg-color (and opacity) - users should know that the overlay it thier.


#5

Ok thanks. I am not fully following you yet regarding.

One “not code” option to solve this is to create extra overlay - assing interaction for this overlay - and affect the button. The overlay must be with bg-color (and opacity) - users should know that the overlay it thier.

I will have a play around, as I think having a interactive hamburger is a pretty standard expectation from clients these days and IX2 should be able to to do it neatly, I just probably have the workflow of doing incorrectly.

From my understanding of what you are saying…the interaction works on the initial 1st click as its targeted to the menu button. Once the menu (overlay) eases in from the left (toggle js), this is perhaps where I need to target the 2nd click to the menu button, in the open state to recognise the overlay function…


#6

I think is better to create seperate Q/topic
"how to create mobile - hamburger menu animation with interaction2".
I never try this (I use custom code).

Maybe other users have examples, share project, tuturials and so on.

About overlays and interaction - try this workshop (± the idea the same. Click on X affect Y):


#7

Will do. Thanks so much for your code solution and input!
Cheers,
Ru


#8

Great. Mark the first answer as solution to close this topic.