Screen dim on nav bar drop down

Hi,

I’m looking to make the screen dim when the nav bar drop down is in use. I figured I’ll need a div at 100% height and width, with a z-value lower than my drop-down, but I’m coming unstuck with the animation / transition.

Could someone walk me through how it’s done?

Live public link: www.willhepworth.co

Private link: https://preview.webflow.com/preview/will-hepworths-ultra-awesome-project?preview=04f2652f1d9f2f9f329e94af90f551d8

Thanks in advance!

MAKE THE LAYER:

  1. Create a new DIV, let’s call it grey out.
  2. Make that DIV 100VW x 100VH
  3. Make the position FIXED and FULL
  4. Give it a Z-Index of 9999 (Just to be safe)
  5. Under background, let’s give it a solid background of Black @ 80% (This is just an example choice.)
  6. Go to the Navigator Panel and double click on your nav bar layer.
  7. Set the z-space of the nav panel to 10000.

INTERACTIONS:

  1. Now double click on your menu icon.
  2. Go to your interactions panel and create a new ‘Mouse Click (Tap)’ interaction.
  3. ‘On 1st Click’, create a new animation.
  4. Create a new Opacity animation and right click that layer and change the target layer to the full-screen DIV we made in the beginning.
  5. Make a copy of that animation action.
  6. Set the opacity of the first animation action to 0%.
  7. Set the opacity of the second animation action to 100%.
  8. Select the first animation action and go down to the ‘Timing’ section and check ‘Set as initial state’. (This will load the DIV as transparent when the site loads.)
  9. Close that animation panel and go to ‘On 2nd Click’.
  10. Duplicate the animation we just made and swap the two opacity animation actions so that we now go from 100% to 0% when we click out. Uncheck ‘Set as initial state’ for the first animation action. Close out of this animation all-together.
  11. Now go to the full-screen DIV we created earlier. Apply a timed animation to this layer (just like we did for the nav menu icon) but apply the second animation we made as the 1st click animation for this layer. This layer doesn’t need a second click animation, so leave it blank.

I didn’t include animation ease settings because that you can do on your own, I’m sure. I hope this helps! Let me know if this causes interactivity issues. You may need to add a move action to your animations to keep it off screen until you need it. If that is the case, do what we did for opacity animations, but use the move action instead. Just move it a split second before and after the opacity change. Perhaps put it off to the left of the screen 100VW. Remember to do this before and after on both layers you added animations to.

2 Likes

Hey Scott,

Thanks for your help with this! Much appreciated :slight_smile:

Will

1 Like

Hi Scott,

I’ve just got round to implementing your solution and unfortunately it’s not working properly and has caused some interactivity issues with accessing other content on my page as the div block prevents anything else being clicked (even when the drop down menu isn’t engaged).

My read only link with the solution implemented is here: https://preview.webflow.com/preview/will-hepworths-ultra-awesome-project?preview=04f2652f1d9f2f9f329e94af90f551d8

Do you have any ideas how I can rectify this?

Thanks for your help, it’s much appreciated

Will

What I would do is set the home location of the gray div to either -100VH or -100VW, and bring it in 1ms before the fade and leave 1ms after the fade back. This should fix it. Remember to do this on both your nav animation (first and second click) and when you click the gray area itself, too.

Thanks Scott, that seems to have done the trick!

One thing is that when the menu is open, clicking on the screen outside of the menu closes the menu, but doesn’t get rid of the grey div block (which I would like it to) - it only disappears on second click.

Could you have a look and let me know where I’m going wrong? https://preview.webflow.com/preview/will-hepworths-ultra-awesome-project?preview=04f2652f1d9f2f9f329e94af90f551d8

Thanks

I’m not getting the same result. Were you able to fix it?

Hi @wshepworth do you find full solution for this issue?