Исправить мобильное меню

22
13 ноября 2018, 07:40

Помогите поправить мобильное меню. Есть меню, у которого по нажатию по кнопке "гамбургер" происходит смещение блока контента вправо и тем самым выезжает мобильное меню. Проблема в том, что в самом меню есть пункты, которые не подразумевают перехода на страницу - там на jquery выводится подменю и т.д. и в результате при клике по любому из пунктов меню оно сворачивается. Помогите сделать так, чтобы при клике по тем пунктам, где нет перехода на страницы мобильное меню не уезжало. Вот код JS:

<script>
  window.onload = function() {
    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });
    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A') { slideout.close(); }
    });
    /*var runner = mocha.run();*/
  };
</script>

В живую можно посмотреть тут (в режиме мобильного устройства). : http://myiconskin.sopteh.beget.tech

Answer 1

У вас в коде указано, что принажатии на любой тег <a> происходит закрытие меню. Просто используйте тег <button>.

Вот этот код:

 if (eve.target.nodeName === 'A') { slideout.close(); }
Answer 2

У каждого пункта, где нет перехода на страницу есть class="m-menu". Код проверит его наличие и не станет закрывать меню если это не прямая ссылка. Это должно сработать:

<script>
  window.onload = function() {
    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });
    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A' && !eve.target.classList.contains("m-menu")) { slideout.close(); }
    });
    /*var runner = mocha.run();*/
  };
</script>
READ ALSO
Как реализовать hover?

Как реализовать hover?

может кто видел, как реализовать такой hover эффект? Или подскажет-поможет реализоватьтык

27
Резиновый трёхколоночный макет

Резиновый трёхколоночный макет

уважаемые html разработчикиТакой вопрос, как написать главную страницу сайта при использовании резинового трехколонного макета, таким образом...

14
CSS таблица выходит за область [закрыт]

CSS таблица выходит за область [закрыт]

Есть обычная таблица html, но при масштабировании ее часть выходит за пределы видимостиКак сделать так чтобы таблица не выходила за пределы,...

19
Single page application (SPA) на Github pages

Single page application (SPA) на Github pages

Есть несколько страниц с таблицами вида:

17