菜单扭曲移动设备上的页面并在右侧创建空白区域 [英] Menu distorts page on mobile devices and creates white space on the right

问题描述

我本身不是网页设计师。我目前是在大学读书的副本作家和动画师。不过，我正与我的一位平面设计师和网站设计师的朋友合作。我们的问题是，如果你看看下面的图片。我们网站上的菜单很长，它会扭曲我们在移动设备上的其他网站。

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

您可以在）隐藏当前菜单并显示移动回退。

我还将移动断点设置为＃cell1 ，＃cell2 和＃cell3 在移动设备上的宽度为100％，因此可以轻松查看这些网格。

此处有一个简单的教程，介绍如何为一个简单的下拉菜单移动。这可能是你现在最好的方法。

I am not a web designer per se. I am a copy writer and animator studying at college at the moment. However I am teaming up with a friend of mine who is a graphic designer and website designer. Our problem is that if you look at the image below. the menu on our website is so long it distorts the rest of our website on mobile devices.

Our menu is has its place near the top of the website however using Javascript, when you scroll down the page the menu fixes to the top of the page. When it is fixed to the top while scrolling the page looks normal, however when the menu is in its original place it creates a white area on the page that should not be there. I am assuming its because its too long but if somebody could take a look and help me I would really appreciate it.

This page can be found HERE I will delete the livelink after the question is answered for future posterity.

This is my CSS for the menu when in its original position as well as when fixed to the top of the browser when user scrolls.

#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; }

解决方案

The problem isn't the menu, per-se, but the fact that it isn't responsive (the entire site isn't responsive). Even the content below is all squished in mobile.

I would highly suggest you rebuild the site on a responsive platform like Bootstrap or Zurb Foundation and take a look at their grid system for your content blocks and carousel, and the mobile menu for mobile fall-backs.

A pitfall you have is also all of your CSS is embedded on each page, rather than calling a unified CSS file. This makes maintenance a nightmare as when you update CSS, you have to update every page.

Another thing you should do is make shared assets be includes. This would require changing your HTML to PHP (PHP includes are what I would suggest anyway). You can do that for the menu and footer.

There is, unfortunately, no quick fix for the menu because it's not really the root of the problem right now.

To make your site responsive, you need to add this in your header: <meta name="viewport" content="width=device-width, initial-scale=1">.

Then you need to set media queries (see http://cssmediaqueries.com/what-are-css-media-queries.html) to hide the current menu and show a mobile fallback.

I would also set the mobile breakpoint to have #cell1, #cell2, and #cell3 be 100% width in mobile so those grids can be easily viewed.

There is an easy tutorial here on how to make a simple dropdown menu for mobile. That would probably be the best method for you right now.

这篇关于菜单扭曲移动设备上的页面并在右侧创建空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！