Question

我正在制作一个演示，当切换菜单按钮时，它将使用纯CSS将内容从屏幕上推出。这将是一个滑出式移动导航菜单。

我在这里以示例为起点：

作者创建了一个导航div和一个内容div。最初导航div有0宽度，内容div有100％像这样：

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow-y: auto;
  transition: width 0.3s ease;
}

然后当您单击菜单切换按钮时，他将宽度尺寸分别更改为20％和80％。

#main-nav:target {
  width: 20%;
}
#main-nav:target + .page-wrap {
  width: 80%;
}

这一切都运行得很好，但不是将.page-wrap div推离屏幕，而只是减小了宽度。这看起来很奇怪，我宁愿把它推离屏幕。我尝试将overflow-x：hidden添加到body并删除.page-wrap部分的显式宽度，但这不起作用。

.page-wrap {
      float: right;
      transition: width 0.3s ease;
    }


body {
  overflow-x: hidden;
}

#main-nav:target {
  width: 40%;
}
#main-nav:target + .page-wrap {
  .open-menu {
    display: none;
  }
  .close-menu {
    display: block;
  }
  .main-header {
    width: 80%;
    left: 20%;
  }
}

是因为＃main-nav的位置设置为“fixed”，因此它不能“推”页面换行div，因为它超出了文档的正常流程？如果是这样，我该如何解决这个问题？

Answer 1

为了获得更好的性能，您应该在可用时使用CSS转换。本教程使用类似于Chris Coyiers的技术，但有更多细节，旧浏览器的一些后备等等。

http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

这是迄今为止我见过的关于这个主题的最清晰的书面教程。以下是结果的工作演示：http://codepen.io/ncerminara/full/KJjiD/

修改

在方法上的差异中添加更多细节。通过上面链接的文章，您将隐藏的导航元素放在屏幕外，带有负边距。当您激活导航区域时，您不会更改其边距，而是实际将整个画布移动一定量 - 暴露导航，并隐藏部分主要内容。

Answer 2

不应动画元素的宽度，而应该为位置设置动画 - 当然，您必须使其绝对定位。你可以搞乱填充填充或其他东西。然后只要将溢出物从屏幕上移开就隐藏起来。

现在，没有任何溢出，这就是为什么它不起作用。无论如何，它只是减小了相对于屏幕的元素宽度。

不要忘记改变转换声明，可能只需要全部。

下面的代码，只留下我从笔中更改的内容

html, body { overflow: hidden; }

.page-wrap {
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.main-nav {
  overflow: hidden;
  transition: all 0.3s ease;
}

#main-nav:target + .page-wrap {
  left: 20%;
  width: 100%;
}

显然，出现溢出并非完全可取：隐藏在整个页面上，但我只是将其作为快速解决方案进行了演示。

尝试制作移动画布外滑动，将主要内容推离屏幕

2 个答案: