Streaming live at 10am (PST)

Click to Show Interaction problem


#1

So I'm working on a client's website and stumbled upon a problem. If you navigate to "Oferta", and click the first button called "PRZYJECIE WARZYW" you'll see, that the hidden div block apears with a height similar to the button, and then it slides revealing the content. Same goes to hiding it. How do I make a smooth slide form 0px to auto, without showing a fragment of the div first, and how to smoothly hide it?

https://preview.webflow.com/preview/michalakco?preview=2a161fc73f8249b4487f267869286962


#2

All right. Your interaction plays on the dimensions of your element. But the CSS box model says that margins/padding aren't part of the dimensions, they're extra. So when you first unhide your element it goes to its zeroed height PLUS margins. That's your glitch.

So, when you do this kind of interactions, nest everything into a div that you don't style at all. Only the 0 height, but no visual property. And that's a good practice for everything in your web design: outer element gets the position and overflow but no style at all. Nest another div in it and add all the visual properties you want, it's going to be fully hidden when the parent div gets zeroed.

Recap: remove interaction and initial zeroing and display styles from your actual div, nest your div in another one. give this new parent the interaction and initial state, then test.


#3

It works! Thank you! Still need to learn a lot more about css.

In the mean time, I've experimented with a dropdown menu (just above the map). It works quite well, and may still be better solution. There are only two problems:
- can't find a way to ease dropdown's close animation
- clicking anywhere outside the dropdown closes it

People had same issues, and it seems like none of them solved it frowning


#4

Cool thing is everything you learn about html5 and css totally works and make sense in webflow smile

If you look at me experiment here http://sab.webflow.io/menu-in-dropdown-menu you'll see that my fade out on close doesn't work either. It's because the component closes the menu before the interaction has the time to play the fade out.

I don't fully get what I should do to make that work properly.


#5

That's as designed and this is a menu component so it just makes sense. You want to use it for something else, you should build your thing from scratch (as you were doing previously wink )


#6

Well, I'd like to do that, but.. still so many buts wink
- Is there a way to somehow "link" the div that's sliding with button's state, so it stays filled with color only when the div is visible? Simple "Clicked" state won't work.
- Arrow icon, and it's rotation animation - I'm pretty sure it's doable with interactions triggered with a click, just didn't test that yet wink

Anyway, thank you for your support!


#7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.