Sidebarnav push content with opacity

Question

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 HTML embed item on the page. Below is the code I have for the menu element. As I said before it is working fine but if I can get it to push the content to the left with opacity, that would be awesome.

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

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByClassName("main-wrap").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

<style>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 {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

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

.sidenavmenu {
  color: #252525;
}

.sidenavmenu:hover {
  opacity: .5;
}

</style><style>.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;
}

<style>.sidebar-content {
  top: 0;
  position: static;
  width: 256px;
  max-widtH: 296px;
  left: - 275px;
  transition: top 0.3s;
}

</style>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a></a>
  <a href="#">Our Team</a>
  <a href="#">Blackboard Learn Resources</a>
  <ul>
    <li> <a href="#">Faculty Resources</a></li>
    <ul>
      <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> <a href="#">Student Resources</a></li>
    <ul>
      <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="#">Accessibility Resources</a>
  <ul>
    <li> <a href="#">Faculty Resources</a></li>
    <ul>
      <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> <a href="#">Student Resources</a></li>
    <ul>
      <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>

Rayees AC · Accepted Answer · 2020-09-11T17:47:21.797

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>

Updated answer @maxigui. Sorry :( . Yesterday is bad me too. — Rayees AC, Sep 11 '20 at 15:06
No worry, I was just passing by and I saw that it was failling. Working find now. Good job. — MaxiGui, Sep 11 '20 at 15:09
thanks, Maxi and Rayess. Is it possible to make the lists expand/collapsible? Would love to organize the menu content to be under categories then separated by the user. For example have a label of Blackboard Resources > Faculty/Student >Page Title — Mara Hogan, Sep 11 '20 at 16:16
@RayeesAC Is it possible to make the lists expand/collapsible? Would love to organize the menu content to be under categories then separated by the user. For example, have a label of Blackboard Resources > Faculty/Student >Page Title. — Mara Hogan, Sep 11 '20 at 16:24
@RayeesAC much appreciated. I enjoy all that you are teaching me as a new coder. I have updated my code with the full list if that is more helpful. — Mara Hogan, Sep 11 '20 at 16:31
I updated answer. Now click `Blackboard Resources` then viewed `Faculty/student Resources`.if click on `Faculty/student Resources` to view `t's child menu items`. — Rayees AC, Sep 11 '20 at 17:07
Thank you so much! This is what i was trying to figure out how to do. I must admit it is well over my coding knowledge but appreciate your help! — Mara Hogan, Sep 11 '20 at 17:15
Welcome to Stack Overflow :). Don't forgot to [accept answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work). I know you are a **New contributor** in Stack Overflow. — Rayees AC, Sep 11 '20 at 17:21
Now i added arrows for dropdown button and change if clicked. — Rayees AC, Sep 11 '20 at 17:48

Sidebarnav push content with opacity

1 Answers1

Linked