Dim the screen on menu item active and focus on dropdown
Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit.
Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.
It is good idea, when user activates some dropdown and rest screen becomes dark to keep user's focus on active dropdown. In other word: dim the screen on active submenu or megamenu. So, how to darken the rest of page behind the dropdown menu? It is very simple.
Steps to dim rest screen on hover or click of menu
- Create bootstrap navbar with dropdown menu
- Create
spanordivelement that covers whole page with dark transparent background - Add styling to that element to hide visually with opacity:0; or visibility:hidden;
- Now add some javascript function that executes when dropdown opens or closes. Check
shown.bs.dropdownorhide.bs.dropdownon Bootstrap 5 documentation
Here are basic code examples
Back to all examples