侧边栏菜单切换和推送内容

好的，我已经使用这段代码好几天了。我正在尝试使用我的汉堡切换开关打开/关闭侧边菜单并将我的内容推到右侧。我需要向我的 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 过渡以获得更平滑的切换。

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 +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;
}

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

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

另外，我宁愿不对宽度进行动画处理，因为有时它真的很奇怪，如果你使用基本的 CSS 来做，甚至会更奇怪。

我建议的是更改有关侧菜单的POV：

(为此，您的页面和侧边菜单必须位于absolute和正文relative

如果您的侧边菜单实际上位于页面下方，而您只转换页面的左侧位置，该怎么办？

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

我的意思是你可以用：

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

然后只需切换一下东西。

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

谢谢你们，这是我解决的。.

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

相关内容

最新更新

热门标签：