title: Making a Page Inaccessible With a Button?
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;body lang = 'en-US'&gt;
  &lt;head&gt;
      &lt;meta charset = 'UTF-8'&gt;
      &lt;meta http-equiv = 'X-UA-Compatible' content = 'IE = edge'&gt;
      &lt;meta name = 'viewport' content = 'width = device-width, initial-scale = 1'&gt;
      &lt;title&gt;Testing&lt;/title&gt;
      &lt;!-- links to relative files --&gt;
      &lt;link rel = 'stylesheet' href = '/Custom_Scrollbar.CSS'&gt;
      &lt;link rel = 'shortcut icon' type = 'image/png' href = '/Images/Odd_Jobs_Favicon.png'&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div class = 'headerBar'&gt;
          &lt;style&gt;
              .headerBar {
                  position: absolute;
                  width: 100%;
                  height: 80px;
                  top: 0px;
                  left: 0px;
                  background-color: #e0e0e0;
              }
          &lt;/style&gt;
      &lt;/div&gt;
  
      &lt;div class = 'headerStrip'&gt;
          &lt;style&gt;
              .headerStrip {
                  position: absolute;
                  width: 100%;
                  height: 5px;
                  top: 80px;
                  left: 0px;
                  background-color: #5e00bc
              }
          &lt;/style&gt;
      &lt;/div&gt;
  
      &lt;div class = 'bodyBar'&gt;
          &lt;style&gt;
              .bodyBar {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 85px;
                  left: 0px;
                  background-color: #000000
              }
          &lt;/style&gt;
      &lt;/div&gt;
  
  
       &lt;div class = 'jobLinks'&gt;
          &lt;li&gt;&lt;a class = 'find' href = '#'&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;style&gt;
               .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;
              }
          &lt;/style&gt;
      &lt;/div&gt;
  
      &lt;div class = 'menu'&gt;
          &lt;button class = 'menuButton'&gt;&lt;/button&gt;
          &lt;div class = 'linkList'&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 6&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class = 'links' href = '#'&gt;Link 7&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;style&gt;
              .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;
              }
          &lt;/style&gt;
  
          &lt;script&gt;
              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';
                  }
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>