右側div向左滑動而不是平滑滑動時會彈出
[英]Right side div pops up when it slides to the left instead of smoothly sliding
問題描述
因此，我嘗試創建一個滑出菜單，該菜單最初位於其左邊緣的負百分比處，當我單擊一個按鈕時，它可以從左向右滑出，我能夠做到。 但是，我希望我的幻燈片菜單在滑出時也將主頁div推到右側。 幻燈片菜單確實將div推到左側，這是我可以通過給主頁div賦予絕對位置來實現的。 但是，問題在於，當我單擊菜單切換開關以將幻燈片菜單向右關閉時，首頁div會迅速彈出，然后跟隨幻燈片菜單向右滑動，而不僅僅是順着菜單幻燈片菜單。
此外，當菜單從左向右滑出時，我會得到不需要的垂直和水平滾動條。 我嘗試通過在父元素上應用“溢出x”來修復它，但並不能解決問題。 有人需要幫助嗎？
我試圖在這里尋找類似的問題，但是找不到任何可以幫助我解決問題的方法。
這是我目前擁有的：
document.getElementById('toggler').onclick = function(){ document.getElementById('side-bar').classList.toggle('active'); document.getElementById('Right-Page').classList.toggle('active'); }
* { 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; }
<!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>
1 個解決方案
解決方案1
0 已采納 2017-10-31 02:18:03
您的position:absolute僅適用於#Right-Page.active 。 它不是絕對定位在返回途中，因此不會滑動。
將position:absolute移動到主要的#Right-Page樣式中，它應該可以按照您想要的方式工作。
使相對定位的 div 向左而不是向下增長
[英]Make relative positioned div grow up to the left instead of down to the right
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.