Sidebarnav 以不透明方式推送内容

Question

尝试让我的菜单将内容推到左侧并使其不透明，直到用户关闭菜单。使用 Weebly，页面 HTML 主要内容显示为：

菜单是页面上的自定义 HTML 嵌入项。下面是我为菜单元素编写的代码。正如我之前所说，它工作正常，但如果我能让它以不透明度将内容推到左侧，那就太棒了。

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>

Answer 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>

Sidebarnav 以不透明方式推送内容

Sidebarnav push content with opacity

html

javascript

css

weebly