Dim the screen on hover of menu item and focus on dropdown
View demo - hover View demo - clickable Download
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 darker 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 dropdown menu? It is very simple.
Steps to dim rest screen on hover or click of menu
- Create bootstrap navbar with dropdown menu
:afterpseudo class to dropdown class (it might be "li" element)
- Add styling to
:afterpseudo class to make full screen darker. But make it hidden with opacity:0; or visibility:hidden;
:afterelement visible on mouse hover (or onclick) by changing opacity and/or visibility
Here are basic code snippets
« Back to all examples