javascripthtmlcssfrontendvisual-web-developer

Want a navbar stop

I did a navbar that shows on the click event listener and I want everything in the background to have a mask on also I want this navbar to prevent the page from scrolling down. Only when I exit the navbar. I couldn't figure out how to do it.

#leftmenue {
  background-color: rgb(255, 255, 255);
  border-radius: 2px;
  height: 100%;
  width: 28%;
  padding: 0;
  position: absolute;
  top: 0;
  z-index: 1000;
  opacity: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: 1.5s;
  display: block;
}
<nav>
  <span>Electronics & Perephiral Devices</span>
  <li><a href="">Gaaming Setup</a><i class="fa-sharp fa-solid fa-headset"></i> </li>
  <li><a href="">Gaaming Setup</a><i class="fa-duotone fa-arrow-turn-down"></i></li>
  <li><a href="">Gaaming Setup</a><i class="fa-solid fa-arrow-up-right"></i></li>
</nav>
<nav>
  <span>Perephiral Devices</span>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
</nav>
<nav>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
</nav>
</div>

Solution

  • you can reach this through

    document.querySelector('html').style.overflow = 'hidden';