Back and navigation menu

Question

Ok, I'm trying to create a mobile version of my site and get stuck in my menu.

Basically, at the moment I have a simple onClick running on the page, so if the user decides that he doesn’t want to view the click on what's on the menu, then they can click on the page and the menu disappears.

But I really want to use the back button in the browser to return from the menu. I suppose this requires some kind of event or something, but I'm at a loss.

I'm a newbie, so be careful, I hope the community can help me learn a little where to start.

My main question is how to use the back button in a browser in my HTML or JavaScript, any ideas on how to proceed will be greatly appreciated.

Answer 1

Updated version of JS: http://jsfiddle.net/0uk0g0qq/4/ (works everywhere) the :targetimplementation is wrong, i.e. therefore the previous one did not work. hash changes only affect css, when the user does something directly on the page, click the button that changes the hash and, unfortunately, the back button is not considered part of the page

All the javascript you need:

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 Version:

You can do this using only CSS. This is the time you learned about the selector :target.

It allows you to apply style to any fragment of the URL hash and is the identifier of the element on the page.

Demo: http://jsfiddle.net/0uk0g0qq/1

, , , . hastags url , , .

, .

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