Question

我在这里有以下网站：http://ideedev.co.uk/newseed/当汉堡包菜单出现时，问题出现在移动模式中。

你会看到我已将汉堡包图标放在标题条的中央，但这会出现问题，因为当我打开手机菜单时，汉堡包图标会滑出，我无法点击它来关闭菜单了。

我最初的想法是让菜单从顶部滑入，但我不确定如何实现这一点，所以我的下一个想法就是简单地关闭＆＃39;关闭＆＃39; X或甚至在移动菜单中的某个地方关闭，这将使菜单滑出...

从我所看到的，我的CSS就在这里：

/* NAVIGATION
   ========================================================================== */
/* Body Class - slides the webpage to the left to allow the nav menu to appear */
.page-slide {
    overflow-x: hidden;
    position: relative;
    right: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.page-slide-out {
    right: 70%;
    overflow: hidden;
    position: fixed;
    /*top: 0;*/
    min-width: 100%;
    height: 100%;
}
@media (min-width: 500px) and (max-width: 68.75em) {
    .page-slide-out {
        right: 350px;
    }
}

@media (min-width: 68.75em) {
    .page-slide-out {
        right: 0;
    }
}

#nav__menu-pos {
    /*float: right;*/
}

.nav {
    /* Hamburger Icon */
    /* Navigation Menu */
    /* Navigation links */
}
.nav__menu {
    cursor: pointer;
    width: auto;
    height: auto;
    margin-top: 19px;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1100px) {
    .nav__menu {
        margin-top: 32px;
    }
}

.nav__menu_line {
    display: block;
    width: 30px;
    height: 4px;
    background: #FFF;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
@media (min-width: 68.75em) {
    .nav__menu {
        display: none;
        margin-top: 32px;
    }
}

.nav__bar {
    margin-left: 205px;
    background-color: #262625;
    position: fixed;
    color: #FFF;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 100;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.nav__bar.nav--pushed-open {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.nav__bar ul {
    margin-top: 6%;
}
@media (min-width: 68.75em) {
    .nav__bar ul {
        margin-top: 0;
    }
}
.menu-item {
    cursor: pointer;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    /* Navigation Menu Media Query */
}
.menu-item a {
    display: block;
    padding: 8% 0;
}
.menu-item:hover {
    background-color: #A2C663;
}
@media (min-width: 68.75em) {
    .menu-item {
        float: left;
        border-top: 5px solid transparent;
        font-size: 14px;
    }
    .menu-item a {
        padding: 39px 15px 0 15px;
    }
    .menu-item:hover {
        border-color: #f4f18e;
        background-color: transparent;
    }
}
@media (max-width: 1099px) {
    .nav__bar {
        max-width: 350px;
    }
}
@media (min-width: 68.75em) {
    .nav__bar {
        position: static;
        background-color: transparent;
        width: auto;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        transition: all 0s;
    }
}

所以，我想我想要学习如何从顶部滑入它或如何在打开时在菜单中添加关闭按钮？

Answer 1

从看起来唯一一次看到侧面导航的时间是你使用较小的视图。你可以简单地在这里添加一些额外的CSS样式

来关闭图标/文本

由于菜单在未打开时不可见，因此您无需在打开时添加关闭按钮，而是可以随时将其关闭。

创建另一个列表元素：

<li id="menu-item-566" class="mobile-close menu-item menu-item-type-post_type menu-item-object-page menu-item-566"><a href="http://ideedev.co.uk/newseed/contact-us/">Close</a></li>

并给出样式：

.mobile-close {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -33px; /* (-50% width) */
    /* Anything else */
}

另外！来自莱斯特的问候！：）

Answer 2

据我所知，关闭按钮实际上就在那里，它只是被移出页面。因此，如果你稍微改变它的位置，你可以让它再次回到视野中。试试这个：

.nav__menu--is-toggled {
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 1000;
}

我说这是解决问题的最省力的解决方案。

Answer 3

我会做两件事： 1.根本不要触摸主网站，使该菜单显示在顶部 2.然后让导航显得比你的标题行低一点，我会说顶部：76px会好的还有一件事 - 有时候你的导航不适合屏幕，所以最好让它在那种情况下滚动并设置溢出：滚动;

在代码中应该如下所示：

 /*style.css @1319 */
.nav__bar.nav--pushed-open {
   -webkit-transform: translateX(0);
   -ms-transform: translateX(0);
   transform: translateX(0);
   top: 76px;
   overflow: scroll; /* this is for smaller screens */
}

/* style.css @1238 */
.page-slide-out {
   /*
   .....

   comment out all stuff 
   or make sure that this class is not applied 
   on a body when toggling navigation
  */
}

添加关闭按钮到移动导航

3 个答案: