问题
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; }
回答1:
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.
来源：https://stackoverflow.com/questions/26469652/menu-distorts-page-on-mobile-devices-and-creates-white-space-on-the-right