Best practices overlay

[krubens (Kjell Ruben)]

Hi,

Im thinkin of making a sidemenu like this one
When the submenu comes out, the background goes black.

I know a few ways of doing this, but what do you recomend?

1. The background is position fixed full screen. display none
2. The background is position fixed full screen. moved 100%. out of the screen
3. The background is position fixed full screen. 0% width
4. or something im not thinking of?

I have the same “problem” on phone menues.

love to hear about your workflow.

Best

Kjell Ruben

---

Here is my public share link: LINK
(how to access public share link)

[vincent (Webflow Expert)]

I would make the dark overlay layer fixed 100wv 100vh opacity:0 display:none

So the first step of your interaction on this object will be 0ms display:block, then opacity:100% in the desired time. The reverse would be opacity:0 in the desired time then another step of 0ms to pass the overlay display:none.

Display:none is useful so it’s not in the way of clicks, for both when you design it and visit it.