javascript - 侧边栏菜单切换并推送内容

好的，你们使用该代码已经有好几天了。我正在尝试使用汉堡包拨动开关打开/关闭侧边菜单并将内容推到右侧。.我需要添加什么到我的toggleNAV（） JS函数可以实现这一目标？谢谢

 <div id="mySidenav" class="sidenav">


 <a href="#">About</a>
 <a href="#">Services</a>
 <a href="#">Clients</a>
 <a href="#">Contact</a>
 </div>

 <div class="container" onclick="myFunction(this);toggleNav();">
 <div class="bar1"></div>
 <div class="bar2"></div>
 <div class="bar3"></div>
 </div>

    <script>function myFunction(x) {
    x.classList.toggle("change");
        }</script>


    <script>
   function toggleNav() {
var element = document.getElementById("mySidenav");
if (element.style.width == "250px") {
    element.style.width = "0px";
} else {
    element.style.width = "250px";
}
}

    </script>

这是我的CSS

  .sidenav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 4444444444444444444;
   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, .offcanvas a:focus{
   color: #f1f1f1;
   }



  #main {
  transition: margin-left .5s;
  padding: 16px;
  position: relative;
  z-index: 0;
  }

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


  .button {
  position: absolute;
  z-index: 444444444444444444;

   }
   .container {
display: inline-block;
cursor: pointer;
       position: absolute;
       z-index: 4444444444444;
    }

 .bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
  }

  /* Rotate first bar */
 .change .bar1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
 transform: rotate(-45deg) translate(-9px, 6px) ;
 }

 /* Fade out the second bar */
 .change .bar2 {
 opacity: 0;
  }

 /* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
 transform: rotate(45deg) translate(-8px, -8px) ;
 }

最佳答案

不是最优雅的，但是它可以正常工作-尝试添加一些CSS3 transitions以使切换更加流畅。

function myFunction(x) {
  x.classList.toggle("change");
}

function toggleNav() {
  var element = document.getElementById("mySidenav");
  var main = document.getElementById("main-content");
  if (element.style.width == "250px") {
    element.style.width = "0px";
    main.style.left = "0px";
  } else {
    element.style.width = "250px";
    main.style.left = "250px";
  }
  $()
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2147483647; /* thats max (−2147483648 to [phone]) */
  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,
.offcanvas a:focus {
  color: #f1f1f1;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
  position: relative;
  z-index: 0;
}

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

.button {
  position: absolute;
  z-index: 444444444444444444;
}

.container {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  z-index: 4444444444444;

}

#main-content {
  background-color: grey;
  padding: 20px;
  position: fixed;
  top: 50px;
  color: white;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  position: fixed;
  left: 200px;
  background-color: white;
  float:left;
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  position: fixed;
  left: 200px;
  background-color: white;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div class="container" onclick="toggleNav();">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<div id="main-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>