移动设备上的菜单扭曲页面并在右侧创建空白区域

Question

我本身不是网页设计师。我是一名文案作家和动画师，目前在大学学习。但是，我正在与我的一位平面设计师和网站设计师的朋友合作。我们的问题是，如果你看下面的图片。我们网站上的菜单太长了，以至于在移动设备上扭曲了我们网站的其余部分。

我们的菜单位于网站顶部附近，但是使用 Javascript，当您向下滚动页面时，菜单会固定到页面顶部。当它在滚动页面时固定在顶部看起来很正常，但是当菜单位于其原始位置时，它会在页面上创建一个不应存在的白色区域。我假设它是因为它太长了，但是如果有人可以看一下并帮助我，我将非常感激。

这个页面可以找到HERE我会在回答完问题后删除livelink以备后人。

这是我的 CSS 菜单，在其原始位置以及用户滚动时固定在浏览器顶部时。

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
display: table;
width: 100%;
list-style: none;
position: relative;
top: -30px;
text-align: center;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: -101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 50px;
left: 50px;
vertical-align:middle;
}
#menu > li:hover > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter;
white-space: nowrap;
color: #333;

}
#menu li a:hover {
color: #CCCCCC;
font-size: 18px;
vertical-align: middle;
}
#menu li ul li {display: inline-block;
float:none; }

Answer 1

问题不在于菜单本身，而在于它没有响应（整个网站都没有响应）。甚至下面的内容都在移动设备中被压扁了。

我强烈建议您在像 Bootstrap 或 Zurb Foundation 这样的响应式平台上重建网站，并查看他们的网格系统以获取您的内容块和轮播，以及用于移动后备的移动菜单。

你的一个陷阱也是你所有的 CSS 都嵌入在每个页面上，而不是调用一个统一的 CSS 文件。这使得维护成为一场噩梦，因为当您更新 CSS 时，您必须更新每个页面。

您应该做的另一件事是包含共享资产。这需要将您的 HTML 更改为 PHP（无论如何我都会建议包含 PHP）。您可以对菜单和页脚执行此操作。

很遗憾，菜单没有快速解决方案，因为它现在还不是问题的根源。

要使您的网站具有响应性，您需要在标题中添加：<meta name="viewport" content="width=device-width, initial-scale=1">。

然后您需要设置媒体查询（请参阅http://cssmediaqueries.com/what-are-css-media-queries.html）以隐藏当前菜单并显示移动后备。

我还将移动断点设置为使 #cell1、#cell2 和 #cell3 在移动设备中的宽度为 100%，以便可以轻松查看这些网格。

有一个简单的教程here 介绍了如何为移动设备制作一个简单的下拉菜单。这可能是目前最适合您的方法。