bouton de retour et navigation dans le menu

Mise à jour de la version JS uniquement: http://jsfiddle.net/0uk0g0qq/4/ (fonctionne partout) l' :targetimplémentation est boguée dans ie. donc le précédent ne fonctionnait pas. les changements de hachage n'affectent le css que lorsque l'utilisateur fait directement quelque chose sur la page, cliquez sur le bouton qui change le hachage et, malheureusement, le bouton de retour n'est pas considéré comme faisant partie de la page

Voici tout le javascript dont vous avez besoin:

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

Version Css uniquement :::

Vous pouvez le faire en utilisant uniquement css. Il est temps que vous vous familiarisiez avec le :targetsélecteur.

Il vous permet d'appliquer un style à tout élément de hachage d'url et à l'identifiant de l'élément sur la page.

Démo: http://jsfiddle.net/0uk0g0qq/1

Donc, je masque le menu par défaut, mais s'il correspond, j'affiche le menu. Étant donné que les hastags dans l'url affectent l'historique du navigateur, il accomplit ce que vous avez demandé.

C'était plutôt génial la première fois que je l'ai appris.

#menu:target {
    display: block;
}

le code entier:

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