« Back to main

Dim the screen on hover of menu item and focus on dropdown

View demo - hover View demo - clickable Download


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
  • Add :after pseudo class to dropdown class (it might be "li" element)
  • Add styling to :after pseudo class to make full screen darker. But make it hidden with opacity:0; or visibility:hidden;
  • Make :after element visible on mouse hover (or onclick) by changing opacity and/or visibility
Here are basic code snippets

« Back to all examples

Creating e-commerce project?