关闭时滑动菜单堆叠文本

Question

我有一个滑动菜单：

 @font-face { font-family: ErasBold; src: url('fonts/erasbd.TTF'); /* Chrome, Opera, Firefox */ } @font-face{ font-family: ErasDemi; src: url('fonts/erasdemi.TTF'); } @font-face{ font-family: ErasLight; src: url('fonts/eraslight.TTF'); } body { background-color: #EDEDED; width: 90%; min-height: 100%; /*border-color: #000000; !INCASE YOU WOULD LIKE TO SEE WHERE THE BODY IS LOCATED ON THE SCREEN. USE FOR DEBUGGING VARIOUS DEVICES! border-style: outset;*/ margin: 0 auto; transition: 1s; } #header { background-color: #000000; position: fixed; height: 95px; width: 100%; top: 0 left: 0; right: 0; } #mainpage { background-color: #EDEDED; height: 82%; width: 100%; margin: 0 auto -4em; position: relative; padding: none; overflow: auto; } #footer{ height: 80px; width: 100%; background-color: #000000; position: fixed; bottom: 0; left: 0; right: 0; } #logo{ height: 100%; width: auto; } .sideNav{ height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; } .sideNav a{ padding: 8px 8px 8px 32px; text-decoration: none; font-size: 27px; color: #818181; display: block; transition: 0.3s; font-family: ErasLight; } .sideNav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sideNav .closeButton{ position: absolute; top: 0; right: 25px; font-size: 40px; margin-left: 50px; } @media screen and (max-height: 450px){ .sideNav {padding-top: 15px;} .sideNav a {font-size: 18px;} } #menuStuff{ color: white; float: right; font-size: 30px; font-family: ErasLight; text-decoration: none; margin-top: 20px; margin-right: 20px; } #menuStuff .hover { color: #FFFFFF; text-decoration: none; }

 <body> <div id="header"> <a href="index.html"> <img src="images/logo.png" id="logo"> </a> <div id="mySideNav" class="sideNav"> <a href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a> <a href="index.html">Home</a> <a href="">About Me</a> <a href="">My Work</a> </div> <a href="#"><span onclick="openNav()" id="menuStuff">Menu &#9776;</span></a> <script> function openNav() { document.getElementById("mySideNav").style.width = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySideNav").style.width = "0px"; document.body.style.backgroundColor = "white"; } </script> </div> <div id="mainpage"> </div> <div id="footer"> </div> </body>

http://codepen.io/dangranger/pen/WGWqvm

当您单击“x”将其关闭时，文本在向内移动时会彼此堆叠在一起。 我怎样才能使它保持原样并滑开？

（对不起，我正在努力解释糟糕的结构）

Answer 1

那是因为你改变了宽度。 即使.sideNav width: 1px （在动画开始时）， x仍然存在。

您可以为位置设置动画：

注意：注意不是在脚本中改变样式，我只是切换open类，并在css中控制样式。 我认为这是一个更好的方法。

 function openNav() { document.getElementById("mySideNav").classList.add('open'); document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySideNav").classList.remove('open'); document.body.style.backgroundColor = "white"; }

 @font-face { font-family: ErasBold; src: url('fonts/erasbd.TTF'); /* Chrome, Opera, Firefox */ } @font-face{ font-family: ErasDemi; src: url('fonts/erasdemi.TTF'); } @font-face{ font-family: ErasLight; src: url('fonts/eraslight.TTF'); } body { background-color: #EDEDED; width: 90%; min-height: 100%; /*border-color: #000000; !INCASE YOU WOULD LIKE TO SEE WHERE THE BODY IS LOCATED ON THE SCREEN. USE FOR DEBUGGING VARIOUS DEVICES! border-style: outset;*/ margin: 0 auto; transition: 1s; } #header { background-color: #000000; position: fixed; height: 95px; width: 100%; top: 0 left: 0; right: 0; } #mainpage { background-color: #EDEDED; height: 82%; width: 100%; margin: 0 auto -4em; position: relative; padding: none; overflow: auto; } #footer{ height: 80px; width: 100%; background-color: #000000; position: fixed; bottom: 0; left: 0; right: 0; } #logo{ height: 100%; width: auto; } .sideNav{ height: 100%; width: 250px; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s; transform: translateX(250px); } .sideNav.open { transform: translateX(0); } .sideNav a{ padding: 8px 8px 8px 32px; text-decoration: none; font-size: 27px; color: #818181; display: block; transition: 0.3s; font-family: ErasLight; } .sideNav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sideNav .closeButton{ position: absolute; top: 0; right: 25px; font-size: 40px; margin-left: 50px; } @media screen and (max-height: 450px){ .sideNav {padding-top: 15px;} .sideNav a {font-size: 18px;} } #menuStuff{ color: white; float: right; font-size: 30px; font-family: ErasLight; text-decoration: none; margin-top: 20px; margin-right: 20px; } #menuStuff .hover { color: #FFFFFF; text-decoration: none; }

 <body> <div id="header"> <a href="index.html"> <img src="images/logo.png" id="logo"> </a> <div id="mySideNav" class="sideNav"> <a href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a> <a href="index.html">Home</a> <a href="">About Me</a> <a href="">My Work</a> </div> <a href="#"><span onclick="openNav()" id="menuStuff">Menu &#9776;</span></a> </div> <div id="mainpage"> </div> <div id="footer"> </div> </body>

Answer 2

发生这种情况是因为您正在修改容器的宽度。

另一种方法是将容器本身滑入/滑出视口。 这可以通过多种方式实现，通常在您的情况下使用right 、 margin-right或translate （或者现在可能是translate3d ）。