Interaction that moves elements to coordinates instead of a number of pixels

I’m trying to create a menu with dropdown areas. Since I’m having problems doing so with dropdown items, I’ve created one using only DIV blocks.

It works great, I’ve assigned interactions to each menu link to slide in a div block containing info and images, all perfectly arranged and defined as a normal DIV section.

In a dropdown menu, if you click the first link, a list drops under it and if you click the next menu item, this first dropdown list closes and the new one opens.

I have been able to replicate this by assigning two “click” interactions to each nav link:

  • One that slides in the dropdown div.

  • And another one that slides up the other area.

The problem that I have is that, in this way, if the first area is not visible (so it is for example 300px up, to be able to create the slide in animation in which it moves down 300px), when I click the second menu item, this first area goes up another 300px from its “hidden” position, so when I click its menu link, it moves down 300px and does not appear in the screen.

This would be so easy to solve if I could tell it to move into coordinates, or defined positions like its initial appearance one, instead of number of pixels that sum over each other. Is there anyway to solve this situation ?

Thank you in advance !

I’ve solved this by using the “dropdown” interaction (good idea webflow!)

1 Like