Question

我有一个滑动菜单：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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

当你点击＆＃34; x＆＃34;要关闭它，当文本向内移动时，文本会堆叠在一起。我怎样才能使它保持原样，然后滑开？

（抱歉结构不好我很难解释）

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）。

关闭时滑动菜单堆栈文本

2 个答案: