Question

我正在尝试通过css实现推送内容。我从幻灯片菜单教程中获得了基本代码，其中大部分都运行良好。

但我的“幻灯片菜单”在触发时一直到页面顶部，但我希望它只能向上滑动80％的屏幕大小，而我本身应该只是这么高。尝试了很多，但只是想不出来。

HTML

<body>

<div id="container">
  <input id="toggle" type="checkbox"><label for="toggle">&equiv;</label>

  <div class="content"> content</div>

  <div class="slide-menu"> </div>

</div>
</body>

CSS

html, body {
   height: 100%;
}

body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

#container {
   display: flex;
   min-height: 100%;
}

input[type=checkbox] {
   position: absolute;
   opacity: 0;
}

label {
   position: absolute;
   top: 10px;
   left: 40px;
   z-index: 1;
   display: block;
   font-size:3em;
   color: #444;
   cursor: pointer;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}

input[type=checkbox]:checked ~ label {
   transform: translate3d(50px, 0, 0) rotate(0deg);
}

.content {
   width:100%;
   padding: 40px;
   background: #00FFA3;
   transform: translate3d(0, 0, 0);
   transition: transform .4s;
}

input[type=checkbox]:checked ~ .content {
   transform: translate3d(0, -250px, 0);
}

input[type=checkbox]:checked ~ .slide-menu {
   transform: translate3d(0, 0%, 0);
}

.slide-menu {
   transform: translate3d(0, 120%, 0);
   position: absolute;
   width: 100%;
   background: #4f6b81;
   color: #ddd;
   left: 0;
   height: 80%;
   transition: all .4s;
}

Answer 1

你的意思是这样的：

JSFIDDLE DEMO

我将top: 20%添加到以下css规则

.slide-menu {
   transform: translate3d(0, 120%, 0);
   position: absolute;
   width: 100%;
   background: #4f6b81;
   color: #ddd;
   left: 0;
   top: 20%;
   height: 80%;
   transition: all .4s;
}

Css幻灯片内容

1 个答案: