Question

所以我试图创建一个滑出菜单，其中菜单最初位于其左边距的负百分比，当我点击一个按钮时，它从左向右滑出，我能够去做。但是，我希望我的幻灯片菜单将主页div推向右侧，当它滑出时。幻灯片菜单确实将div推向左侧，我可以通过为主页div提供绝对位置来实现这一点。但问题是，当我单击菜单切换以将滑动菜单关闭到右侧时，主页div会先快速弹出，然后滑动菜单向右滑动，而不是顺利跟随滑动菜单。

此外，当菜单从左向右滑出时，我会得到垂直和水平滚动条，这是我不想要的。我尝试通过应用＆＃34;溢出x＆＃34;来修复它。在父元素上，但它没有解决它。有人帮忙吗？

我试图在这里寻找类似的问题，但找不到任何可以帮助我解决问题的问题。

以下是我目前的情况：

＆＃13;

document.getElementById('toggler').onclick = function(){
  document.getElementById('side-bar').classList.toggle('active');
  document.getElementById('Right-Page').classList.toggle('active');
}

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: 'Lora', serif;
  }    

#side-bar{
  width: 60%;
  height: 100vh;
  background-color: black;
  display: inline-block;
  margin-left: -60.5%;
  transition: all 0.6s ease;
  vertical-align: top;
}

#side-bar.active {
  margin-left: 0%;
}

#side-bar ul {
  list-style: none;
}

#side-bar ul li {
  margin-top: 15px;
  margin-left: 20px;
  float: left;
}

#side-bar ul a {
  text-decoration: none;
  color: white;
}

#side-bar ul li:hover {
 border-bottom: solid 1px #ffffff;
}

#Right-Page {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100vh;
  background-color: red;
}

#Right-Page.active{
  position: absolute;
}

#toggler{
  margin-top: 8px;
}

#toggler span{
  background-color: #000000;
  width: 35px;
  height: 4px;
  display: block;
  margin-bottom: 5px; 
  margin-left: 10px;
}

＆＃13;

<!Doctype html>
    <html lang="en">
    <head>
        <title>Side Bar</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Lora" 
     rel="stylesheet">
    </head>
    <body>
        <div id="main-container">
            <div id="side-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
            <div id="Right-Page">
                 <div id="toggler">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div id="main-text">
                    
                </div>
            </div>
        </div>
    
    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

＆＃13;

Answer 1

您的position:absolute仅适用于#Right-Page.active。它没有绝对定位在回来的路上，所以不会滑动。

将position:absolute移动到主#Right-Page样式中，它应该按照您想要的方式工作。

当它向左滑动而不是平滑滑动时，右侧div会弹出

1 个答案: