Как сделать, чтобы меню появлялось только после прокрутки?

Question

[hsnz]

Ребята, привет.
Подскажите пожалуйста, есть скрытое меню, оно появляется только на мобильных устройствах, изначально когда сайт загружается оно уже высвечивается в шапке сайта, как сделать так, чтобы оно появлялась только после начала прокрутки сайта?

Сайт: revery.ru/test
Еще вопрос, как сделать так, чтобы после перехода по меню, меню сворачивалось?

Answer 1

[Islam Ibakaev]

1. даёшь изначально display: none, затем когда при прокрутке добавляешь класс .top-nav-collapse элементу nav возвращаешь гамбургер через display: block

2. элементу с классами nav navbar-nav navbar-right navbar-border добавляешь айдишку mobileNav

добавляешь джаваскрипт код

var mobileNav  = document.getElementById('mobileNav')
var navbarToggler = document.querySelector('.navbar-toggle')

mobileNav.addEventListener('click', onMobileNavLink)

function onMobileNavClick(e) {
  if (e.target && e.target.nodeName === 'A') { // если нажал на ссылку в пределах меню
  navbarToggler.click() // закрываешь меню
}

Comments

[hsnz]

Islam Ibakaev Спасибо большое, первый пунк работает на ура, вот со вторым пунктом проблема, добавил я элементу с данными классами id, добавил js все равно не работает.
Живой пример на сайте: revery.ru/test

[Islam Ibakaev]

поробуй через jquery (раз уж ты его потащил в проект)

var mobileNav  = $('#mobileNav')
var navbarToggler = $('.navbar-toggle')

mobileNav.on('click', 'a',  onMobileNavClick) // при клике на ссылку внутри mobileNav

function onMobileNavClick(e) {
  navbarToggler.trigger('click') // закрываешь меню
}

[hsnz]

Islam Ibakaev: все равно не исчезает меню.

Answer 2

[Артем]

Примерно так

Comments

[hsnz]

Спасибо, подскажите пожалуйста, как сделать так, чтобы меню сворачивалось после нажатие на определенный элемент.

[Артем]

По клику снаружи
Например, так

[Islam Ibakaev]

Артем: боже, что это скрипт, я даже прочитать не смог (: