在移动设备上使用overflow-x时，我的菜单消失了

Question

我有一个menu，这是在一个div，我隐藏在屏幕上。当menu-button被按下时，我把menu带入视野。在这样做的同时，我将身体的可见内容转移到一边，为menu留出空间。

当我最初这样做的时候，我把overflow-x:hidden;放在body中，它在桌面上工作得很好。当我把网站加载到手机上时，我注意到手机的行为不一样了——它试图显示menu和屏幕上的所有内容。

我做了一点阅读，它指出，移动浏览器忽略overflow-x时，放置在html或正文标签和包装器div应该创建。

当我做这个编辑我的menu消失了。当我单击menu-button时，内容会移动到menu，但不会出现。这是怎么回事?我不太明白为什么menu会消失。我该如何解决这个问题?

我制作的包装器是....

#body_wrapper{
        overflow-x: hidden;
    }

<div id="body_wrapper">
  My nav bar...
  My menu...
  my content...    
</div>
    

我的网址是- http://robingham.co.uk/LUUCC6/index.php

这个网站的当前编辑在CSS的主体中设置了overflow-x:hidden;，而不是body_wrapper。所以菜单显示出来了，但在手机上不能正常运行。

Answer 1

所以我解决了我的问题!呐喊!

原来我是使用.animate()在Jquery为我的菜单动画。菜单将隐藏在屏幕外，并使用动画功能，我将"慢慢"(在0.3秒内285px)移动菜单到屏幕上。虽然这在桌面浏览器中工作得很好，我把overflow-x: hidden;放在body的CSS中。移动浏览器在body中会忽略overflow-x: hidden;。

阅读周围，我看到很多关于将overflow-x: hidden;放在body内容的包装器中。Ie。内容。虽然它确实阻止了滚动条弹出的x轴和内容被缩小，它搞砸了我的菜单-我的菜单就这样消失了。无论出于何种原因，将overflow-z: hidden;放入包装器与Jquery动画函数不一致。我试着把菜单放在包装纸外面，但还是没有运气。我还尝试了overflow-x: hidden;在包装和身体都没有成功。

好吧，所以时间的新策略，因为我花了太长时间玩我的菜单只是废弃它。

我的解决方案

我目前有我的菜单坐在包装器外面，所以我决定保持overflow-x: hidden;在身体和包装器。也许有点夸张，但至少我知道不管用什么浏览器，它都能正常工作。也许在将来，我会有一点杂事，把菜单放回包装内，只有包装中的overflow-x: hidden;，看看它是否仍然有效。)我有点不喜欢到处都有做相同/相似工作的东西。感觉有点乱。)

菜单现在附加了三个相关的类。menu, menu_hide, menu_show。menu有我所有的CSS格式。我使用menu_hide和menu_show类来隐藏和显示菜单。

菜单的默认HTML是这样的。注意，它有两个类。

<div class="menu menu_hide">

我的CSS的隐藏和显示看起来像这样。注意，transition所做的工作与Jquery的.animate()函数相同。

.menu_show{
    transition: 0.3s;
    left: 0px;
}
.menu_hide{
    transition: 0.3s;
    left: -285px;
}

我的JS看起来像这样。请注意，每次点击菜单按钮时，我都会在菜单显示和隐藏类之间切换。

$('.icon-menu').click(function() {
     $('.menu').toggleClass( "menu_show menu_hide" );
});