Question

我在移动设备上使用JavaScript，HTML和CSS设计一个简单的滑入式菜单

<div class="menu">division
     <ul>unordered list
          <li>list item 1</li>
          <li>list item 2</li>
     </ul>
</div>

CSS：

.menu {
    position: absolute;
    width: 0px;
    background: #111;
    -webkit-transition: width 2s; 
    transition: width 0.5s;
}

.menu.act {
    position: absolute;
    background: #111;
    width: 67%;
}

（一小段JavaScript代码将菜单的类更改为＆＃34; menu act＆＃34;）

问题是，为什么只有黑色背景从左边滑入，而HTML元素中的文字留在屏幕上？

Answer 1

你根本不是移动/滑动 ul，只是改变宽度。

ul没有宽度，因此无法显示背景。文本溢出了零宽度元素，这就是它仍然可见的原因。

然后，当您展开宽度时，背景变为可见。

我已将其切换为:hover以进行演示。

body {
  background: red;
}
.menu {
  position: absolute;
  width: 0px;
  background: #111;
  -webkit-transition: width 2s;
  transition: width 0.5s;
  color: white;
}
.menu:hover {
  position: absolute;
  background: #111;
  width: 67%;
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

相反，请尝试将宽度保持为67％并调整位置......就像这样。

body {
  background: red;
  height: 100vh;
}
.menu {
  position: absolute;
  top: 0;
  left: -67%;
  width: 67%;
  background: #111;
  transition: left 0.5s;
  color: white;
}
body:hover .menu {
  left: 0;
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

或者使用转换，然后“定位”将是自动的。

body {
  background: red;
  height: 100vh;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 67%;
  transform: translateX(-100%);
  background: #111;
  transition: transform 0.5s;
  color: white;
}
body:hover .menu {
  transform: translateX(0%);
}

<div class="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</div>

CSS转换文本和背景

1 个答案: