Sidebarnav Push Content With Opacity

Trying to have my menu push the content to the left and make it opaque until the user closes the menu. With Weebly, the page HTML main content is shown as: The menu is a custom HTM

Solution 1:

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.backgroundColor = "white";
}  

body {
  font-family: "Raleyway", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a.closebtn:hover {
  opacity:0.8;
  background:#eee;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  opacity:0.8;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 36px;
  margin-left: 0;
  width: 30px;
  padding: 5px !important;
  z-index:99;
  background:#111;
}

#main {
  transition: margin-left 600ms ease;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.sidenavmenu {
  color: #252525;
}

.sidenavmenu:hover {
  opacity: .5;
}

.sidebar-content {
  position: static;
  background-color: #F9F9F9;
  padding: 15px;
  text-decoration: none;
  font-weight: 300;
  font-size: 20px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

h2 {
  font-weight: 400px;
  color: #460E72;
  font-size: x-large;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

a:link {
  text-decoration: none;
  color: #B6B6BA;
}

a:visited {
  text-decoration: none;
  color: #404041;
}

a:hover {
  color: #404041;
  background-color: #eeeeee;
  cursor: pointer;
}

a:active {
  text-decoration: none;
  color: #FF6712;
}

.sidebar-content {
  top: 0;
  position: static;
  width: 256px;
  max-widtH: 296px;
  left: - 275px;
  transition: top 600ms ease;
  
}
ul{
  list-style-type:none;
}
.submenu{
  padding-left:10px;
}
.subsubmenu{
  padding-left:20px;
}
.submenu,.subsubmenu{
  display:none;
}

#dropdown.active+.submenu,#subdropdown.active+.subsubmenu{
  display:block;
}
.fa{
  display: inline-block;
  vertical-align: middle;
  color:#fff;
  padding-left:5px;
}
#dropdown.active .fa-angle-down::before{
  content: "\f106";
}
#subdropdown.active .fa-angle-down::before{
  content: "\f106";
}

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Our Team</a>
  <a href="#" id="dropdown" onclick="this.classList.toggle('active')">Blackboard Learn Resources <i class='fas fa-angle-down'></i></a>
  <ul class="submenu">
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#" >Faculty Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Coruse Content Management</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
      <li> <a href="#">Communicaiton</a></li>
    </ul>
    <li id="subdropdown" onclick="this.classList.toggle('active')"><a href="#" >Student Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Communicaiton</a></li>
      <li> <a href="#">Coruse Content</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
    </ul>
  </ul>
  <a href="#" id="dropdown" onclick="this.classList.toggle('active')">Accessibility Resources <i class='fas fa-angle-down'></i></a>
  <ul class="submenu">
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#">Faculty Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Blacbkoard Ally</a></li>
      <li> <a href="#">Accessible Design</a></li>
      <li> <a href="#">Captioning</a></li>
      <li> <a href="#">Accessbile Live Sessions</a></li>
    </ul>
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#">Student Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li><a href="#">Blacbkoard Ally</a></li>
      <li><a href="#">Captioning</a></li>
    </ul>
  </ul>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span class="sidenavmenu" style="font-size:13px;cursor:pointer" onclick="openNav()">&#9776; Knowledge Base Navigation </span>