後退按鈕和菜單導航

Question

好吧，我正在設計我的網站的移動版本，並卡在我的菜單上。

現在基本上我已經有一個簡單的onClick在頁面上運行，所以如果用戶決定他們不想查看點擊菜單上的什麼，那麼他們可以點擊頁面，菜單消失。

但我真正想要的是一種使用瀏覽器上的返回按鈕從菜單返回的方式。我猜這需要某種事件或設置一些東西，但是我們很遺憾。

我是一個新手，所以要溫柔，我希望社區可以幫助我一點，從哪裏開始。

我的主要問題是如何使用我的HTML或JavaScript中的瀏覽器後退按鈕，任何想法如何進行將不勝感激。

Answer 1

更新JS唯一版本：http://jsfiddle.net/0uk0g0qq/4/（作品無處不在） :target實現在IE馬車。所以以前的一個不工作。哈希值的變化只會影響CSS當用戶直接就網頁上的東西，點擊按鈕，改變散，不幸的後退按鈕不被認爲是頁

的所有你需要的JavaScript的部分是這樣的：

var menu = document.getElementById('menu'); 
window.addEventListener('hashchange', function(e) { 
    if (location.hash != "#menu") { 
     menu.style.display = "none"; 
    } else if (location.hash == "#menu") { 
     menu.style.display = "block"; 
    } 
}); 

Css Only版本:::

你只能用css來做。現在您瞭解了:target選擇器。

它可以讓您將樣式應用於URL散列片段，並且是頁面上元素的ID。

演示：http://jsfiddle.net/0uk0g0qq/1

所以我默認隱藏菜單，但如果它匹配i顯示了菜單。由於URL中的hastags會影響瀏覽器歷史記錄，因此它會完成您所要求的操作。

這是非常棒的第一次，我瞭解到它。

#menu:target { 
    display: block; 
} 

整個代碼：

body { 
    background-color: cornsilk; 
} 
.cont { 
    width: 500px; 
    margin: auto; 
} 

#menu { 
    display: none; 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    height: 100%; 
    background-color: rgba(0,0,0,.3); 
    margin: auto; 

} 

#menu > ul { 
    width: 200px; 

    list-style-type: none; 
    background-color: #fff; 
    margin: auto; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%,-50%); 
} 

#menu > ul li { 
    padding: 20px 10px; 
} 

#menu:target { 
    display: block; 
}