Question

好的，我已经使用这段代码了好几天..我正在尝试使用我的汉堡包切换来打开/关闭侧边菜单并将我的内容推到右边..我需要添加到我的内容中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) ;
 }

Answer 1

不是最优雅，但它的工作 - 尝试添加一些CSS3 transitions以实现更顺畅的切换。

＆＃13;

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";
  }
  $()
}

＆＃13;

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2147483647; /* thats max (−2147483648 to +2147483647) */
  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;
}

＆＃13;

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

＆＃13;

Answer 2

首先，我不确定z-index:4444444444444444是否可靠。由于以下原因，您的菜单不会将其余部分推向右侧：它们不在同一个z-index上。

另外，我宁愿不为宽度设置动画，因为它有时会非常奇怪，如果你用基本的CSS做的话会更多。

我建议改变你对侧边界的POV：

（为此，您的页面和侧面菜单必须定位absolute和正文relative）

如果您的sidemenu实际位于您的页面下方并且您只转换页面的左侧位置，该怎么办？

或者它们可能位于同一级别，但默认情况下，您的侧面菜单位于左侧和右侧视图中，因此您在单击时向右移动。

我的意思是你可以用以下方法解决问题：

body{
  position : relative;
  overflow-x:hidden;
  /* ... */
}

.mySideMenuClass{
  position : absolute;
  z-index : 0;
  top:0;
  left:0;
  bottom:0;
  width:/*some width (named SMw for later)*/
  /* ... */
}

.myPageClass{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  transition: all /*some duration*/s ease-in-out;
  /* ... */
}

.myPageClass.SMtoggled{
  left:/*SMw*/;
  /* ... */
}

只是toggleClass the thingie。

这不是一个完整的解决方案，但你现在可以在键盘上得到这个想法;）！

Answer 3

谢谢你，这就是我的成果..

function toggleNav() {
var element = document.getElementById("mySidenav");
if (element.style.width == "250px") 
{(document.getElementById("main").style.marginLeft = "0");
    (element.style.width = "0px");
 } else {
    (element.style.width = "250px");
 (document.getElementById("main").style.marginLeft = "350px");
 }
 }

边栏菜单切换和推送内容

3 个答案: