Назад кнопка и навигация по меню

Question

Хорошо, я пытаюсь создать мобильную версию своего сайта и застрять в моем меню.

В основном на данный момент у меня есть простой onClick, запущенный на странице, поэтому, если пользователь решает, что не хочет просматривать клики, что находится в меню, тогда они могут щелкнуть страницу, и меню исчезнет.

Но я действительно хочу использовать кнопку возврата в браузере для возврата из меню. Я предполагаю, что это требует какого-то события или чего-то, но я в недоумении.

Я новичок, поэтому будьте нежны, я надеюсь, что сообщество поможет мне немного узнать, с чего начать.

Мой главный вопрос: как использовать кнопку «Назад» в браузере в моем HTML или JavaScript, любые идеи о том, как действовать, будут очень благодарны.

Answer 1

Обновлено JS только версия:http://jsfiddle.net/0uk0g0qq/4/ (работает везде) :target реализация глючит в то есть. поэтому предыдущий не работал. изменения хэша влияет на CSS только тогда, когда пользователь непосредственно делает что-то на странице, нажмите кнопку, которая изменяет хэш и, к сожалению, назад кнопка не рассматривается как часть страницы

все яваскрипт вам нужно это:

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

Вы можете сделать это, используя только css. Пришло время узнать о селекторе :target.

Он позволяет применять стиль к любому фрагменту хеш-файла и является идентификатором элемента на странице.

Демо: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; 
}