Question

我有一个menu，它位于我隐藏屏幕的div中。按下menu-button后，我将menu置于视图中。在这样做的同时，我将身体的可见内容转移到一侧，为menu留出空间。

当我最初这样做时，我将overflow-x:hidden;置于正文中，并且它非常适用于桌面。当我将网站加载到手机上时，我发现手机的行为并不相同 - 它会尝试显示menu以及屏幕上显示的所有内容。

我做了一点阅读，并表示移动浏览器在置于html或body标签时会忽略overflow-x，并且应创建包装器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

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

最初我在Jquery中使用.animate()作为我的菜单动画。菜单会隐藏在屏幕外并使用动画功能，我会慢慢地（385px，0.3s）将菜单移动到屏幕上。虽然这对桌面浏览器非常好，我将overflow-x: hidden;放入body的CSS中。放置在overflow-x: hidden;。

中时，移动浏览器会忽略body

我四处看到有很多关于将overflow-x: hidden;放入身体内容包装中的信息。 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" );
});

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

1 个答案:

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

我的解决方案