How do I make all content on screen go dark except the sidenav one you click on the burger button

Question

I would like to make the screen go dark when clicking and opening the sidenav and possibly freezing the rest of the screen so you cant scroll down the page but only on the sidenav, MY js for opening the nav is below currently I just have the background get darker but all the links on the page are still lit up and are clickable, How would I make everything go darker thank you

 // burger menu button with effects //
    function openNav() {
      document.getElementById("mySidenav").style.width = "280px";
      document.body.style.background = "rgba(0,0,0,.8)";
      document.getElementById("despair").style.opacity = "0.33";
      document.getElementById("closebtn").style.marginLeft = "200px";
    }

Answer 1

This basic example will put a blocking cover in front of the page when the button is clicked. As I said in a comment, it functions by using the element classList and toggling a class on the div that acts as a cover.

In this sample the cover is removed after 5 seconds; in reality you would remove the cover after some event, such as when the user made another choice in your sidenav, or, if navigation from the sidenav went to another page you wouldn't have to remove the cover because the new destination page would not put it up initially.

For more precise control you can use add and remove in place of toggle .

If you wanted to have your sidenav remain available (not be blocked) you could set it at a higher z-index than the cover.

 const cover = document.getElementById('cover'); const blockit = document.getElementById('blockit'); blockit.addEventListener('click', function(event) { event.preventDefault(); cover.classList.toggle('covering'); window.setTimeout(function() { cover.classList.toggle('covering'); }, 5000); });

 /* The cover starts off not being displayed, with a size of 0 x 0 pixels, and "behind" the rest of the page (negative z-index) */ div#cover { display: none; position: fixed; top: 0; left: 0; height: 0; width: 0; z-index: -1; } /* When the "covering" class is added to the cover it is displayed, has the size set to 100%, and is raised to z-index 100, in front of the rest of the page content. */ div#cover.covering { display: block; height: 100%; width: 100%; z-index: 100; background-color: rgba(0, 0, 0, 30%); }

 <main> <p> This is a sample paragraph. It has a link to <a href="https://stackoverflow.com/">Stackoverflow</a> within the text of the paragraph. You want to make that link unclickable. </p> <button id="blockit">Block It</button> </main> <div id="cover"></div>