微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Sidebarnav推送内容不透明

分类：编程问答

如何解决Sidebarnav推送内容不透明

试图让我的菜单向左推送内容，使其不透明，直到用户关闭菜单。使用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.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,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>

解决方法

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.body.style.backgroundColor = "rgba(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,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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot