It would be great if you add Backdrop to the mega menu. Suppose we have a mega menu in the header. Backdrop covers the content of the website when the mega menu is displayed.
In fact, the header and megamenu content are not affected by the backdrop, and only other parts of the website become darker (backdrop). This is not a special feature and I have seen it on several websites before.
In fact, this feature makes the user focus only on the content of the mega menu when the mega menu is displayed.
You could probably achieve this easily with interactions. Have an absolute positioned background visible only when the mega menu is open, and hide it when the menu closes or someone clicks on the background. Just make sure the z index is higher than the page, but less than the mega menu.
I can’t do a screenshot right now, but I’ll see if I get a chance in the next day or two. It should be something like, trigger mouse enter, action show element, and target is a class or id of the backdrop. And you’d add the interaction to the top level of mega menu. Then add a second interaction to the same element, trigger mouse leave, hide element, use the same class/id as before. I haven’t tried this yet myself, but it should work.