javascript - 后退按钮和菜单导航

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 版本::

您可以仅使用 css 来完成。是时候学习 :target 选择器了。

它允许您将样式应用于 url 哈希片段和页面上元素的 id。

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

所以我默认隐藏菜单，但如果它匹配我显示菜单。由于 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;
}