后退按钮和菜单导航

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; 
}