时间戳

首页 > 解决方案 > 使用简单的滑块菜单，但即使在滑块和页面翻译之后菜单项也被隐藏

css - 使用简单的滑块菜单，但即使在滑块和页面翻译之后菜单项也被隐藏

问题描述

div 标签嵌套为

<div class="Site-wrapper" id="Site-wrapper">
  <div id="Main-Menu-mobile" class="Main-Menu-mobile">
   <div class="Site">
   </div>
  </div>
</div>

菜单的逻辑就是这 4 个 CSS 类

.Site-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.nav-open .Site {
  left: auto;
  transform: translate3d(70%, 0, 0);
}

.Site {
  position: relative;
  left: 0;
  min-height: 100%;
  background-color: #e4e4e4;
  transition: 0.2s ease all;
}

.Main-Menu-mobile {
  width: 70%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
}

https://codepen.io/taufeq-orangejulius-razakh/pen/dypgjNO

标签： css

解决方案

您的Site-Wrapperdiv （父级）只有一个heightof 41px。即使切换器按钮向右平移，这也保持不变。这是实现有点偏离的地方。

尝试overflow:hidden从 .Site-wrapper 中删除您的

.Site-wrapper {
  position: relative;
  width: 100%;
  /* overflow: hidden; This needs to be implemented well*/
}

您可以做的是，一旦单击汉堡图标，更改 Javascript 中的溢出属性值。

推荐阅读