导航栏中溢出主体的(右)幻灯片问题

时间:2019-06-04 17:14:07

标签: jquery css mobile

我无法用我的代码解决问题。我正在使用右侧的滑入式导航面板。但是,当面板从其活动状态以其非活动状态被触发时,主体会绕x轴溢出。

这是我编写的代码

$(document).ready(function(){
  $('.toggle').click(function(){
    $('.menu').toggleClass('active')
  })
})
body{
  margin:0;
  padding:0;  
  overflow-x: hidden; 
}
.menu, .toggle{
  position:absolute;
}
.menu{
  top:0;
  bottom:0;
  right:-300px;
  width:300px;
  background:green;
  transition:.22s;
}
.menu.active{
  right:0;
}
.toggle{
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<div class="toggle"></div>

codepen:https://codepen.io/ayushgx/pen/mYgyJe

我已经在我的代码中尝试过overflow-x: hidden,但似乎无法正常工作。

我也已经找到了一支笔,他已经在代码中做过的一切,但是对我没有任何帮助

这是笔: https://codepen.io/erikterwan/pen/grOZxx

我不知道我是否错过了某事

因为该代码在桌面浏览器中可以正常运行,但在移动浏览器中不能运行。 但是在erikterwan的给定笔中,它可以完美地适用于移动设备和台式机

1 个答案:

答案 0 :(得分:0)

由于菜单和切换按钮的位置是绝对的,因此父容器必须包含position: relative

.body{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

请注意,我已经在代码笔中添加了代码,以确保菜单的高度符合预期:

https://codepen.io/anon/pen/NVmPzy

现在应该可以在移动设备上使用了。