Question

<body>

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

<div id="main">
<span class="menuBtn" onclick="toggleNav()">&#9776;</span>
</div>

<script>
function toggleNav() {
var x = document.getElementById("mySidenav");
var y = document.getElementById("main");
  if (x.style.width === "") {
    x.style.width = "250px"
    y.style.marginLeft = "250px"
} else {
    x.style.width = "";
    y.style.marginLeft = "";
}

}
</script>
</body>

当我打开导航菜单时，我试图将主要内容推到一边。尝试仅使用一个按钮完成此操作。我是JavaScript的新手。

Answer 1

＆＃13;

    function toggleNav() {
      var x = document.getElementById("mySideNav");
      var y = document.getElementById("main");
      var width = x.getBoundingClientRect().width;
      
      y.classList.toggle('open');
      
      if (y.classList.contains('open')){
        x.style.left = '0px';
        y.style.left = width + 'px';
      } else {
        x.style.left = -width + 'px';
        y.style.left = '0px';
      }

    }

＆＃13;

    body {
      padding: 0px;
      margin: 0px;
      overflow: hidden;
    }

    .menuBtn:hover {
      cursor: pointer;
    }

    #mySideNav {
      position: absolute;
      left: -300px;
      width: 250px;
      height: 100%;
      border: 1px solid black;
      transition: all 1s;
      padding: 0px;
      margin: 0px;
      background-color: lightblue;
     }

    #main {
      background-color: lightgreen;
      position: absolute;
      left: 0px;
      height: 100vh;
      width: 100vw;
      transition: all 1s;
    }

    .open {
      background-color: rgb(100, 200, 255) !important;
    }

＆＃13;

    <div id="mySideNav" class="sidenav">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

    <div id="main">
      <span class="menuBtn" onclick="toggleNav()">
        &#9776;
      </span>
      <h1>Main Content</h1>
    </div>

＆＃13;

编辑：好吧，现在不再是星期五了，今天我感觉不那么懒。无论侧导航设置的大小如何，现在都可以使用。

切换Push Nav。但是当我打开菜单时不会推送主要内容（No Jquery）

1 个答案: