Darken the page when your menu is open

May 4, 2020

If you have a navigation bar with many options, it’s likely that it has a pop-out structure. Basically, you hover the mouse over one main element, and this opens a submenu with more options. This submenu overlays the main page. However, this can make it a bit hard to see what’s the menu and what’s part of the main page.

To solve this, you can darken the page when the menu is open. This way, you have a clear contrast between the menu and the page, while everything is still visible.