Dimming screen beneath menus/dropdowns

Design help General
1

Hello,

Two questions:

  1. I have a drop down menu that I would like to dim the rest of the screen below when it is clicked on. How can I do that?

  2. How do I add easing to a dropdown’s open and close click (basically to animate the dropdown list up and down)?

Thanks!

2

You can do this with an interaction. First make a fixed full size div with the darkened overlayn and make it display:none. Then you want to make sure the dropdown is set to a higher z index then the overlay. Then create an interaction on the dropdown to show/hide the overlay. Because you set the dropdown to be over the overlay, it should dim everything else.
For your other question, this page may help http://webflowcodestutorials.webflow.io/click

Hope that helps!