I’m trying to create an effect where the page around & behind a dropdown menu darkens after the user clicks on the item. Here’s an example: Women's Clothing | Women's Fashion | M&S.
If you click on the women item, a mega menu appears and the rest of the page darkens to provide important contrast. Thanks to help from past forum convos, I was able to create a mega menu. However, I don’t know how to make the rest of the page darken.
I’m new to this and don’t know how to code. Any assistance would be greatly appreciated.
Many thanks! This product & community has been extremely helpful.
For get the effect that you want, you will need to create a semitransparent layer which will have Z-index less than menu, but higher than rest of content.
For this
add a div (right before or after navigation bar),
give it position fixed, size fill, 100% high, background color and transparency
check Z index
initial make opacity 0%, when dropdown menu open this div will become opacity 100% (probably it will need interaction)
And I would recommend to do all this after all your site will be ready. Other way div will cover your content and it will be hard to add and change something.