添加關閉按鈕到移動導航

Question

我在這裏有以下網站：http://ideedev.co.uk/newseed/和問題是在移動模式，當漢堡菜單出現。

您會看到我已將漢堡包圖標定位在標題條的中央，但這會出現問題，因爲當我打開移動菜單時，漢堡包圖標滑出，我無法點擊它關閉菜單再次。

我最初的想法是讓菜單從頂部滑入，但我不確定如何實現這一點，所以我的下一個想法是隻需在移動設備的某個位置簡單地使用「關閉」X或甚至單詞CLOSE菜單這將使菜單背面滑出......

從我所看到的，我的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

據我所看到的關閉按鈕實際上是在那裏，它只是被移出頁面。所以如果你稍微改變它的位置，你可以讓它再次回到視野中。試試這個：

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

我會說這是解決您的問題最省力的解決方案。

Answer 2

從側面導航看起來似乎只有當你使用較小的視圖。您可以簡單地在這裏添加關閉圖標/文本以及一些額外的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 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 
    */ 
}