Making a Page Inaccessible With a Button?-CodePudding

My goal is something similar to what YouTube has when you click their menu icon; the rest of the page gets darker and nothing on that part of the page is accessible to the user until the button is clicked again and the menu recedes. Any help with this would be greatly appreciated.

<!DOCTYPE html>
<body lang = 'en-US'>
<head>
    <meta charset = 'UTF-8'>
    <meta http-equiv = 'X-UA-Compatible' content = 'IE = edge'>
    <meta name = 'viewport' content = 'width = device-width, initial-scale = 1'>
    <title>Testing</title>
    <!-- links to relative files -->
    <link rel = 'stylesheet' href = '/Custom_Scrollbar.CSS'>
    <link rel = 'shortcut icon' type = 'image/png' href = '/Images/Odd_Jobs_Favicon.png'>
</head>


<body>
    <div class = 'headerBar'>
        <style>
            .headerBar {
                position: absolute;
                width: 100%;
                height: 80px;
                top: 0px;
                left: 0px;
                background-color: #e0e0e0;
            }
        </style>
    </div>

    <div class = 'headerStrip'>
        <style>
            .headerStrip {
                position: absolute;
                width: 100%;
                height: 5px;
                top: 80px;
                left: 0px;
                background-color: #5e00bc
            }
        </style>
    </div>

    <div class = 'bodyBar'>
        <style>
            .bodyBar {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 85px;
                left: 0px;
                background-color: #000000
            }
        </style>
    </div>


     <div class = 'jobLinks'>
        <li><a class = 'find' href = '#'>Link</a></li>
        <style>
             .jobLinks {
                text-decoration: none;
                list-style: none;
            }
        
            .find {
                position: absolute;
                width: 80px;
                height: 40px;
                top: 30px;
                left: 300px;
                font-family: 'comfortaa';
                font-size: 18px;
                font-weight: 800;
                color: #000000;
                text-decoration: none;
                text-align: center;
                transition: ease-out 0.4s;
                background-color: #e0e0e0;
            }
        
            .find:hover {
                color: #5e00bc;
            }
        </style>
    </div>

    <div class = 'menu'>
        <button class = 'menuButton'></button>
        <div class = 'linkList'>
            <ul>
                <li><a class = 'links' href = '#'>Link 1</a></li>
                <li><a class = 'links' href = '#'>Link 2</a></li>
                <li><a class = 'links' href = '#'>Link 3</a></li>
                <li><a class = 'links' href = '#'>Link 4</a></li>
                <li><a class = 'links' href = '#'>Link 5</a></li>
                <li><a class = 'links' href = '#'>Link 6</a></li>
                <li><a class = 'links' href = '#'>Link 7</a></li>
            </ul>
        </div>
        <style>
            .menuButton {
                position: absolute;
                width: 30px;
                height: 30px;
                top: 25px;
                left: 1303px;
                border: none;
                outline: none;
                transition: ease-out 0.5s;
                background-image: url('/Images/Menu_Icon.png');
                background-color: #e0e0e0;
                cursor: pointer;
            }

            .links {
                font-family: 'comfortaa';
                font-size: 18px;
                font-weight: 500;
                color: #000000;
                text-decoration: none;
                transition: ease-out 0.4s;
            }

            .links:hover {
                color: #5e00bc;
            }

            .linkList {
                position: fixed;
                width: 150px;
                height: 100%;
                right: -150px;
                top: 85px;
                transition: ease-out 0.5s;
                background: #e0e0e0;
            }

            .linkList ul li {
                list-style: none;
                padding: 15px;
            }

            .menuButton:focus ~ .linkList {
                right: 0px;
            }
        </style>

        <script>
            menuBtn = document.getElementsByClassName('menuButton')[0];
            menuBtn.addEventListener('click', function() {
                menu = document.getElementsByClassName('linkList')[0];
                menu.style.webkitTransition = '0.6s';
                if (menu.style.right == '0px') {
                    menu.style.right = '-150px';
                } else {
                menu.style.right = '0px';
                }
            });
        </script>
    </div>
</body>
</html>

CodePudding user response：

It can be achieved by some css and js.
I am adding menuOpen class when the menu is open. and removing it when the menu is closed.
menuOpen class css is setting other content besides menu unaccesseiable.

const open = document.querySelector("#open");
const close = document.querySelector("#close");
const menu = document.querySelector("#menu");

open.addEventListener("click", () => {
  menu.classList.add("active");
  document.body.classList.add("menuOpen");
});
close.addEventListener("click", () => {
  menu.classList.remove("active");
  document.body.classList.remove("menuOpen");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  overflow-x: hidden;
}

#menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100px;
  position: absolute;
  top: 0;
  left: -100px;
  background-color: #f5f5f5;
  padding: 20px;
  transition: .5s;
}

#menu.active {
  left: 0;
}

.menuOpen {
  position: relaive;
  transition: .5s;
}

.menuOpen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

<button id="open">open</button>
<div id="menu">
  <button id="close">close</button>
  <button>a</button>
  <button>a</button>
  <button>a</button>
</div>
<p>content</p>