关闭时滑动菜单堆叠文本

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 class，并在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

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

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

关闭时滑动菜单堆叠文本

Sliding Menu Stacks Text When Closing

html

javascript

css

menu

slide