How to blur the background when dropdown is open?-CodePudding

Im creating a dropdown using CSS and HTML. The dropdown pops up when elements of nav-bar are hovered. I want the whole background below and under the nav-bar, excluding the dropdown to be blurred. I am attaching part of my code and css below. For the below code add any picture below the nav-bar

nav {
  display: inline-flex;
  width: 100%;
  height: 5rem;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: -3.4rem;
  padding-left: 1.5rem;
}

.nav-list li {
  line-height: 8rem;
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 2rem 1rem;
}

.sub-menu a {
  color: #ffffff;
  font-size: 1.1rem;
}

.sub-menu {
  position: absolute;
  background-color: red;
  visibility: hidden;
  box-sizing: border-box;
  z-index: 500;
}

.nav-list li:hover>.sub-menu {
  top: 7.99rem;
  visibility: visible;
  opacity: 1;
}

<nav>
  <ul >
    <li>
      <a href="">Test</a>
      <ul >
        <li>
          <a href="#">1</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CodePudding user response：

Usually this is done with an overlay to obscure everything on the page except the element you want to highlight. If you insist on using blur, you can do so with the filter: blur(); property in css.

The approach I usually take when making overlays is having a div element positioned absolutely, then have a '.active' style with left, right, top, bottom set to 0. Then use javascript to assign the 'active' class to the overlay when you need it to appear, and manipulate the z-index of the overlay and dropdown as needed.

CodePudding user response：

You can use the backdrop-filter property with a blur value e.g. backdrop-filter: blur(4px).

Create a backdrop for your nav that covers the elements you'd like to blur. You could either use JavaScript to apply the appropriate class when you want the background active, or if your markup is structured in such a way that your nav is a descendant of your backdrop you could use :has on the backdrop to apply it's class when the nav is hovered. Something like

  backdrop:has(nav:hover) { /* styles */ }