How to blur body when menu is opened? – JavaScript – SitePoint Forums

Hello all, how are you doing? How you can blur physique when cell menu is opened?
I attempted one thing like this, however that impacts my cell menu I simply need background to be blured not menu.

CSS:

physique.blur > *:not(.menu) 
  filter: blur(5px);
 

menu is only a ul and it’s a sidebar on cell units

JS:

hamburger.addEventListener("click on", () => 
  hamburger.classList.toggle("lively");
  menu.classList.toggle("open");
  physique.classList.toggle("fastened");
  physique.classList.toggle("blur");
);

That ought to work if I perceive appropriately.

A really tough demo as simply going out

That’s the consequence I need, however by some means my menu obtained affected with the physique too.

There should be a typo or one thing.

I’m again on the morning when you have a hyperlink or a demo? It ought to be one thing fairly easy.

> = “the direct baby”

You’d have to point out us your HTML to get higher recommendation. We’d have to know the construction of your web page.

Sorry for my English , I’m doing my greatest.

Right here is HTML:

<header id="header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col d-flex align-items-center">
            <div
              class="hamburger d-flex flex-column justify-content-between d-md-none"
            >
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="brand">
              <a href="#">
                <img src="img/brand.svg" alt="brand" />
              </a>
            </div>
            <nav id="nav">
              <ul class="menu">
                <li class="menu-item">
                  <a href="#" class="menu-link">Collections</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="menu-link">Males</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="menu-link">Ladies</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="menu-link">About</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="menu-link">Contact</a>
                </li>
              </ul>
            </nav>
          </div>
          <div class="col">
            <div class="float-end">
              <img src="img/icon-cart.svg" alt="cart" class="cart-icon" />
              <img
                src="img/image-avatar.png"
                alt="profile image"
                class="profile-img"
              />
            </div>
          </div>
        </div>
        <hr class="line" />
      </div>
    </header>

And CSS of the physique:

physique 
  font-family: var(--primary-ff);
  min-height: 100vh;
  font-size: 1rem;

You’re doing effective
For the HTML, stick it right into a code block (put “` on a clean line earlier than it, and the identical on a clean line after it), that’ll format it so we will see.

So the issue is I can’t seize menu like this and the rationale why background shade labored as an alternative of blur is that I’ve a z-index:111 on menu. When you have any suggestion how might I do it in a different way that will assist quite a bit. Mainly , I wish to blur every part when menu is open besides menu.

do you wish to blur the cart and avatar picture?

nicely, there’s a pair methods to do it… easiest that strikes to my thoughts is to blur every part after which unblur the menu…

physique.blur  filter: blur(5px); 
.menu  filter: none; 

This after all does assume you dont wish to apply another filter kind to the menu at another cut-off date.

That isn’t working .

physique.blur 
  filter: blur(5px);


physique.blur .menu 
  filter: none;

I can apply background shade however filter none can’t , menu continues to be blured.

Nicely that isnt what i gave you to enter.

What i imply is… you modified what i instructed you to place in there.

I instructed you this:

You place on this:

Okay , hear that isn’t working okay? Should you don’t know how you can do it, don’t reply simply ignore this submit. Thanks

At the very least attempt earlier than answering if you wish to assist after all

The css filter is ‘atomic’.

You possibly can’t unblur kids

If a guardian is blurred then so are all the kids they usually can’t be unblurred.

That’s why in my demo the blurred components and the unblurred components are separate.

Should you can’t extricate the html on your menu from its guardian then the very best you are able to do is shim {a partially} opaque fastened pseudo aspect beneath the menu however above every part else.

I’m out at a restaurant in the intervening time so can’t provide code

Again tomorrow.

Nicely I can’t very a lot say that i’m inclined to assist should you’re going to take that perspective with individuals truly attempting.

As Paul has outlined that the filter is atomic, it’ll must be utilized with extra specificity.

physique.blur > *:not(#header),
physique.blur > #header img 
  filter: blur(5px);

Maybe subsequent time present some persistence.

This code does assume that the header is a direct baby of the physique.

Really , you possibly can seize menu like this

physique > *:not(.menu) 
  background-color: pink !essential;

The issue is it’ll apply to the menu too as a result of he’s baby of the nav they usually must be seperated I’ll attempt tomorrow it was a protracted day.