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

Question

我本身不是网页设计师。我现在是在大学读书的文字作家和动画师。然而，我正与我的一位朋友合作，他是一名平面设计师和网站设计师。我们的问题是，如果你看下面的图像。我们网站上的菜单很长，它会在移动设备上扭曲我们网站的其他部分。

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

可以找到此页面HERE我会在回答问题后删除后续链接以供将来后人使用。

这是我在原始位置以及用户滚动时固定到浏览器顶部的菜单的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。那对你来说可能是最好的方法。