Question

我正在尝试构建一个菜单，该菜单可以通过按一个按钮来滑动。另外，打开菜单时，单击屏幕的任何部分都应滑出。

到目前为止，我已经设法创建了除滑出效果之外的所有内容，现在幻灯片消失了，没有从右到左移动。

var navBtn = document.getElementById("navBtn");
var navMenu = document.getElementById("navMenu");
var container = document.getElementById("container");
navBtn.addEventListener("click", showMenu);
container.addEventListener("click", hideMenu);

navMenu.style.display = "none";

function showMenu(){
if(navMenu.style.display !== "none"){
navMenu.style.display = "none"}
else{navMenu.style.display = "block", container.style.background = "rgba(0, 102, 199, 1)";}}

function hideMenu(){
if(navMenu.style.display = "block"){
navMenu.style.display = "none", container.style.background = "lightblue";}}

#main-container {
  width: 350px;
  height: 600px;
  border: 1px solid black;
  position: absolute;
  overflow: hidden;
}

#container {
  width: 350px;
  height: 100%;
  display: absolute;
  z-index: 1;
  background: rgba(0, 102, 199, 0.8);
}

#navBtn {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  z-index: 999;
}

#navMenu {
  width: 250px;
  height: 100%;
  background: blue;
  position: absolute;
  z-index: 9999;
  top: 0;
  animation-name: slidein;
  animation-duration: .5s;
}

@-webkit-keyframes slidein {
  0% {transform: translateX(-200px);}
  100% {transform: translateX(0px);}
}

#navMenu.close {
  animation-name: slideout;
  animation-duration: .5s;
}

@-webkit-keyframes slideout {
  0% {transform: translateX(0px);}
  100% {transform: translateX(-200px);}
}

<div id="main-container">
<div id="navBtn"></div>
<div id="container">
<div id="navMenu"></div>
</div>
</div>

也许有人可以向我展示实现此目标的方法？基本上，有效的幻灯片应该与插入的幻灯片相同，只是方向相反。

Answer 1

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}


function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}

body {
    font-family: "Lato", sans-serif;padding:40px;
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #B971BB;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    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;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <h2>Sidena Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>

Answer 2

好像您将滑出动画附加到了一个.close类上，而该类从未应用到菜单上。

执行此操作并获得更多控制的最简单方法是在应打开菜单时向容器添加一个类。之后，只需使用css和左位置以及过渡效果即可对菜单进行动画处理。我一分钟后会提供代码

Answer 3

html

    <div id="main-container">
  <div id="navBtn"></div>
  <div id="container">
    <div id="navMenu"></div>
  </div>
</div>

jsCode

var navBtn = document.getElementById("navBtn");
var navMenu = document.getElementById("navMenu");
var container = document.getElementById("container");
navBtn.addEventListener("click", showMenu);
container.addEventListener("click", hideMenu);

//navMenu.style.display = "none"; // remove the display: none as you cannot animate display block to display none

function showMenu() {
    container.classList.add('open');
}

function hideMenu() {
  container.classList.remove('open');
}

和CSS

   #main-container {
      width: 350px;
      height: 600px;
      border: 1px solid black;
      position: absolute;
      overflow: hidden;
    }

    #container {
      width: 350px;
      height: 100%;
      z-index: 1;
      background: rgba(0, 102, 199, 0.8);
      transition: all 0.3s ease-in-out;
    }

    #navBtn {
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;
      z-index: 999;
    }

    #navMenu {
      width: 250px;
      height: 100%;
      background: blue;
      position: absolute;
      z-index: 9999;
      top: 0;
      left: -250px;
      transition: all 0.3s ease-in-out;
    }

    #container.open  {
      background: rgba(0, 102, 199,1);
    }


    #container.open #navMenu {
      left: 0;
    }

滑动菜单，如何同时滑入和滑出？

3 个答案: