Best practices overlay

Design help General
1

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)

1 Like
2

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.

1 Like
3

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