javascript - 协助推送菜单

Question

我在使用推送菜单时遇到问题。我正在使用此站点的推送菜单:http://callmenick.com/post/slide-and-push-menus-with-css3-transitions

我遇到的问题是主推送菜单。当您打开然后关闭它时，所有内容都会稍微向左移动(见屏幕截图)。页面推送菜单没有这个问题，当您在打开和关闭主菜单后打开页面菜单时，所有内容都会按原样重新对齐。页面推送菜单没有任何问题。

谁能看看我的 HTML 和 CSS 看看我是否遗漏了什么。

您可以在此处查看问题:http://designs.totaleeyou.com/jml-development/header-1/h1-menu-3.html#top

Answer 1

所以我需要对 header.article 进行更改，删除宽度:100vw；

header.article {
background-attachment: scroll, scroll;
background-clip: border-box, border-box;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 140, 153, 0.6), rgba(0, 140, 153, 0.6)), url("../images/design/lt-campus.jpg");
background-origin: padding-box, padding-box;
background-position: 0 0%, 0 0;
background-repeat: repeat, repeat;
background-size: cover;
height: 265px;
width: 100vw; /* Remove this */
}

虽然上面的代码解决了桌面版的这个问题，但我不得不为这个问题的移动版做额外的改动。我不得不改变 padding:5px;填充:5px 0;

#search-container {
background-color: #fdbc5d;
margin-bottom: 30px;
padding: 5px 0; /* CHANGE THIS */
position: absolute;
top: 84px;
width: 100%;
}